Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Selektor atrybutu z możliwością dopasowania ciągu znaków

Email Drukuj PDF

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

 

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

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15281193