Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - selektory atrybutów

CSS3 - selektor attribute*

Email Drukuj PDF

Tematy: attibute* | attribute^ | attribute$

Selektor atrybutu attribute*=wartość pozwala wybrać element, w którego zawartości w dowolnym miejscu występuje dany ciąg znaków.

Przykładowo, możemy zażądać, aby link o określonej zawartości był wyświetlany w specjalny sposób. Wymieniając adresy kilku portali, zażyczymy sobie, aby np. Gazeta.pl był wyświetlany innym kolorem niż Onet.pl, Wirtualna Polska czy Interia.pl.

Użyjemy tu stylu o postaci:

a[href*="gazeta"] {color:#006400}

Spowoduje to wyświetlanie wszystkich adresów zawierających w dowolnym miejscu ciąg gazeta w podanym kolorze (darkgreen).

Kod o postaci:

a[href*="gazeta"] {color:#006400; border: solid 1px olive; padding: 2px}

wyświetli adres z obwódką.

Pokażmy jeszcze inne przykłady.

Użyjemy selektora atrybutu o postaci:

img[src*="public"] {border:solid 3px olive}

Spowoduje on, że wszystkie ilustracje mające w dowolnym miejscu adresu człon public (mają go ilustracje umieszczone w SkyDrive) będą wyświetlane z 3-pikselową obwódką w oliwkowym kolorze.

Podobnie, styl:

img[width*="200";] {border: dotted 2px red}

spowoduje objęcie wszystkich ilustracji o szerokości 200 pikseli (ale także 1200, 2000 itp.) czerwoną, kropkowaną obwódką o 2-pikselowej grubości.

Interpretacja: Internet Explorer 9, Firefox, Opera, Chrome.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V