Selektor atrybutu pojawił się już w drugiej specyfikacji CSS i pozwala na dopasowanie stylu na podstawie atrybutu znacznika XHTML/HTML. Zanim zacznę dokładniej opisywać nowości wprowadzone przy okazji CSS3, pozwoliłem sobie przypomnieć, jak wygląda typowy selektor atrybutu znany do tej pory. Na początek przykład fragmentu kodu XHTML/HTML.
<h1 title=”czerwony”>Nagłówek stopnia pierwszego</h1>
Przykładowy znacznik H1 posiada opcjonalny atrybut title. Dzięki selektorowi atrybutu możemy w taki sposób przygotować arkusz stylów, aby można było formatować tylko te elementy, które zawierają wskazany przez nas atrybut. Poniżej zamieściłem przykład arkusza stylów dla powyższego kodu XHTML/HTML.
H1[title]
{
color:red;
}
Dzięki takiej konstrukcji bez problemu możemy poddać formatowaniu wszystkie nagłówki stopnia pierwszego wyposażone w atrybut title. Niestety zgodnie ze specyfikacją CSS 2.1 nie mamy możliwości kontroli zawartości atrybutu. Przyjrzyjmy się kolejnemu przykładowi.
<h1 title="pierwszy-naglowek-czerwony">Nagłówek stopnia pierwszego</h1>
<h1 title="drugi-naglowek-podkreslony">Nagłówek stopnia pierwszego</h1>
<h1 title="trzeci-naglowek">Nagłówek stopnia pierwszego</h1>
Budując arkusz stylów i wykorzystując selektor atrybutu, nie mamy możliwości zróżnicować jego działania dla poszczególnych nagłówków. Na szczęście trzecia specyfikacja CSS wprowadza znaczne ulepszenia w selektorze atrybutu, który od teraz może dotyczyć wybranych ciągów znaków występujących w danym atrybucie znacznika.
Pierwszy z selektorów wykorzystujący ciągi znaków pozwala na podpięcie stylu w oparciu o tekst, od którego zaczyna się dany ciąg znaków. Zwróć uwagę na występowanie znaku ^ w zapisie selektora. To właśnie ten element odpowiada za poinformowanie przeglądarki, iż szukamy elementów, które zaczynają się od wskazanego ciągu znaków. Poniższy przykład dotyczy wszystkich znaczników H1, w których występuje atrybut title zaczynający się od znaków pie. W praktyce oznacza to, że formatowaniu (kolor czerwony) zostanie poddany pierwszy z przykładowych nagłówków.
H1[title^="pie"]
{
color:red;
}
Drugi arkusz widoczny poniżej dotyczy wszystkich znaczników H1 posiadających atrybut title kończący się ciągiem ony. Zwróć uwagę na występowanie znaku $ w zapisie selektora. To właśnie ten element odpowiada za poinformowanie przeglądarki, iż szukamy elementów, które kończą się wskazanym ciągiem znaków. W praktyce oznacza to, że formatowaniu (podkreślenie tekstu) zostanie poddany pierwszy i drugi nagłówek z naszego przykładu.
H1[title$="ony"]
{
text-decoration:underline;
}
Trzeci przykład arkusza zamieszczonego poniżej dotyczy sytuacji, gdy chcemy się odwołać do znaczników H1 posiadających atrybut title, w którym w dowolnym miejscu występuje ciąg znaków naglowek. Zwróć uwagę na występowanie znaku * w zapisie selektora. To właśnie ten element odpowiada za poinformowanie przeglądarki, iż szukamy elementów, które w dowolnym miejscu zawierają wskazany ciągu znaków. W naszym przypadku wszystkie nagłówki będą wyświetlane za pomocą czcionki pochyłej.
H1[title*="naglowek"]
{
font-style:italic;
}
Przykład działania powyższych selektorów zamieszczam poniżej. Warto jednak mieć na uwadze to, że przeglądarka Internet Explorer nie radzi sobie z niniejszym rozwiązaniem.
<<przykład>>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
<title>Tytuł Strony WWW</title>
<style type="text/css">
H1[title^="pie"]
{
color:red;
}
H1[title$="ony"]
{
text-decoration:underline;
}
H1[title*="naglowek"]
{
font-style:italic;
}
}
</style>
</head>
<body>
<div class="przyklad">
<h1 title="pierwszy-naglowek-czerwony">Nagłówek stopnia pierwszego</h1>
<h1 title="drugi-naglowek-podkreslony">Nagłówek stopnia pierwszego</h1>
<h1 title="trzeci-naglowek ">Nagłówek stopnia pierwszego</h1>
</div>
</body>
</html>
<</przykład>>
