CSS3 - selektory atrybutów

CSS3 - selektor attribute*

wtorek, 08 luty 2011 10:58 pwimmer
Drukuj

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ą.

http://www.gazeta.pl

http://www.onet.pl

http://www.wp.pl

http://www.interia.pl

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.