Atrybuty w CSS

CSSFrontend
Kod CSS przedstawiaj膮cy wykorzystanie atrybut贸w

W tym wpisie dowiesz si臋 wszystkiego na temat atrybut贸w w CSS! 馃檪

Zobaczysz te偶 przyk艂ad jak wykorzysta膰 to niezwyk艂e narz臋dzie w praktyce.

Czym s膮 atrybuty?

Atrybuty to po prostu atrybuty. 馃檭

Dla przyk艂adu, w tagu <img> standardowymi atrybutami s膮 src, a wi臋c atrybut, w kt贸rym podajemy 艣cie偶k臋 do obrazka oraz alt, w kt贸rym opisujemy, co dany obrazek przedstawia.

Innymi przyk艂adami atrybut贸w mog膮 by膰 href, class, id, rel itd.

Jak mo偶emy korzysta膰 z atrybut贸w w CSS?

Atrybuty to bardzo przydatne elementy, cho膰 warto doda膰, 偶e w CSS-ie wykorzystujemy jedynie 50% ich potencja艂u.

Drugie 50% przypada na JavaScript, ale to temat na osobny wpis.

Przypomn臋 te偶, 偶e aby odwo艂a膰 si臋 do jakiego艣 elementu w CSS, mo偶emy targetowa膰 go za pomoc膮 nazwy tagu / klasy / ID.

body {}
.test {}
#test {}

Natomiast je艣li chcemy odwo艂a膰 si臋聽do atrybut贸w, musimy skorzysta膰 z nawias贸w kwadratowych [].

[class] { color: gold; } 
/* wszystkie elementy z atrybutem `class`, otrzymaj膮 z艂oty kolor */

a[href] { font-size: 2rem; }
/* linki, kt贸re posiadaj膮 atrybut `href`, b臋d膮 mia艂y rozmiar 2rem */

a[href="https://mmcschool.pl"] { font-size: 5rem; }
/* linki, kt贸re posiadaj膮 atrybut `href`, kt贸ry prowadzi na stron臋 MMC School, b臋d膮 mia艂y rozmiar 5rem */

Atrybuty mo偶emy ze sob膮 艂膮czy膰, aby by膰 bardziej specyficznym.

a[href="https://mmcschool.pl"][class="super-link"] { font-size: 10rem; }
/* linki, kt贸re posiadaj膮 atrybut `href`, kt贸ry prowadzi na stron臋 MMC School ORAZ posiadaj膮 klas臋 "super-link", b臋d膮 mia艂y rozmiar 10rem */

Specjalne zastosowania atrybut贸w

Do atrybut贸w mo偶emy doda膰 znaki specjalne (*, ~, ^, |, $), kt贸re znacznie rozszerz膮 mo偶liwo艣ci tego prostego i jak偶e pot臋偶nego narz臋dzia.

  • [nazwa_atrybutu*="mmc"]

Szukamy warto艣ci atrybutu, kt贸ra zawiera litery mmc w dowolnym miejscu.

To znaczy, 偶e litery mog膮 by膰 na pocz膮tku, na ko艅cu lub w 艣rodku. Mog膮 by膰 oddzielone my艣lnikiem, mog膮 stanowi膰 cz臋艣膰 innego s艂owa.

<!-- te paragrafy spe艂niaj膮 wymagania -->
<p class="mmc"></p>
<p class="mmc123"></p>
<p class="mmc-123"></p>
<p class="mmcschool"></p>
<p class="testmmcschool">(litery "MMC" s膮 w nazwie klasy)</p>

<!-- te paragrafy nie spe艂niaj膮 wymaga艅 -->
<p class="mc"></p>
<p class="mm123"></p>
  • [nazwa_atrybutu~="mmc"]

Szukamy warto艣ci atrybutu, kt贸ra zawiera litery mmc i litery te nie s膮 z艂膮czone z innymi znakami.

<!-- te paragrafy spe艂niaj膮 wymagania -->
<p class="mmc"></p>
<p class="mmc school"></p>

<!-- te paragrafy nie spe艂niaj膮 wymaga艅 -->
<p class="mmc123"></p>
<p class="mmc-123"></p>
<p class="mmcschool"></p>
  • [nazwa_atrybutu^="mmc"]

Szukamy warto艣ci atrybutu, kt贸ra zaczyna si臋 od liter mmc.

<!-- te paragrafy spe艂niaj膮 wymagania -->
<p class="mmc"></p>
<p class="mmc-123"></p>
<p class="mmcschool"></p>

<!-- te paragrafy nie spe艂niaj膮 wymaga艅 -->
<p class="ammc"></p>
<p class="MMC-123"></p> (atrybuty s膮 case-sensitive 鈥 wyja艣nienie ni偶ej)
  • [nazwa_atrybutu|="mmc"]

Podobny atrybut do ^, natomiast tym razem szukamy liter mmc, kt贸re s膮 jedynymi znakami przypisanymi do warto艣ci atrybutu lub zaraz po nich wyst臋puje my艣lnik -.

<!-- te paragrafy spe艂niaj膮 wymagania -->
<p class="mmc"></p>
<p class="mmc-123"></p>

<!-- te paragrafy nie spe艂niaj膮 wymaga艅 -->
<p class="test-mmc"></p>
<p class="mmc school"></p>
  • [nazwa_atrybutu$="mmc"]

Odwrotno艣膰 do ^, a wi臋c tym razem warto艣膰 atrybutu musi ko艅czy膰 si臋 literami mmc.

<!-- te paragrafy spe艂niaj膮 wymagania -->
<p class="mmc"></p>
<p class="school-mmc"></p>
<p class="schoolmmc"></p>

<!-- te paragrafy nie spe艂niaj膮 wymaga艅 -->
<p class="mmcschool"></p>
<p class="mmc school"></p>

Wykorzystanie w praktyce

Jednym z przyk艂ad贸w wykorzystania atrybut贸w w praktyce, mog膮 by膰 ikonki powi膮zane z rozszerzeniem plik贸w.

W przyk艂adzie poni偶ej szukamy link贸w, kt贸re prowadz膮 do plik贸w PDF (ko艅cz膮 si臋 literami pdf) i dodajemy do nich odpowiedni膮 grafik臋.

<a href="file.pdf">Plik PDF</a>
a[href$="pdf"]::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  padding-right: 14px;
  background-image: url('link_do_ikony_PDF');
  background-repeat: no-repeat;
  vertical-align: -6px;
}

Efekt:

Plik PDF

Atrybuty s膮 case-sensitive!

Atrybuty s膮 case-sensitive, a wi臋c s膮 wra偶liwe na wielko艣膰 liter.

Poni偶szy paragraf nie zostanie pokolorowany na czerwono, poniewa偶 nazwa klasy ma w sobie wielk膮 liter臋.

<style>
  p[class="mmc"] {
    color: red;
  }
</style>

<p class="Mmc"></p>

Aby rozwi膮za膰 ten problem, mo偶emy skorzysta膰 z flagi i, kt贸r膮 dodajemy wewn膮trz nawias贸w kwadratowych.

<style>
  p[class="mmc" i] {
    color: red;
  }
</style>

<p class="Mmc"></p>

Teraz wielko艣膰 znak贸w nie ma najmniejszego znaczenia. 馃槈

W ramach 膰wicze艅 鈥 zach臋cam do stworzenia jakiego艣 projektu z atrybutami. Efektem mo偶esz pochwali膰 si臋 na naszym Discordzie na kanale #wasze-projekty. 馃檪

Poprzedni wpis
R贸偶nice mi臋dzy rel „noopener”, „noreferrer” i „nofollow”
Nast臋pny wpis
Czas na zmiany!