Pseudoelementy w CSS3

Pseudoklasy zna większość, ale czy potrafisz wymienić pseudoelementy CSS3? Pytanie jest dosyć podchwytliwe, ponieważ cztery z pięciu pseudoelementów odziedziczone zostały z CSS 2.1, a jeden element mimo tego, że został usunięty ze specyfikacji, nadal jest wspierany przez przeglądarki. Dodatkowo teraz oficjalna dokumentacja rozróżnia pseudoklasy od pseudoelementów - te pierwsze mają pojedynczy dwukropek przed nazwą, a drugie podwójny. Zajmijmy się tymi drugimi.

Selection

Na pierwszy ogień idzie pseudoelement o nazwie selection. Służy on do zdefiniowania stylów CSS (np. koloru czcionki i tła) dla zaznaczonych elementów. Jest to dodatkowy szczegół, dzięki któremu możemy jeszcze lepiej dostosować wygląd poszczególnych elementów do ogólnego stylu naszej strony. Firefox oferuje swój przedrostek w postaci -moz-selection. Zobaczmy kawałek kodu CSS:

.text::selection {

	color: #F00;

	background: #CFC;

}

Zobacz przykład 1, ::selection.

Co prawda pseudoelement selection został zdefiniowany w dokumencie CSS3 Selectors z 2005 roku, jednak później został usunięty i nie ma go w aktualnym szkicu. Mimo tego wsparcie przez przeglądarki jest całkiem dobre (Safari 1.1+, Opera 9.5+, IE9+ Firefox 1+ z przedrostkiem) i selection będzie nadal wspierany.

First-line

Mało znany pseudoelement, dzięki któremu możemy ustawić style dla pierwszej linii tekstu. Ważne jest, by tekst zawierał się w elemencie blokowym.

.text::first-line {

	color: #F00;

	background: #CCF;

}

Zobacz przykład 2, ::first-line.

First-letter

Kolejny mało znany, ale ciekawy pseudoelement, dzięki któremu będziemy mogli ostylować pierwszą literę tekstu. Definiując inną czcionkę, wielkość czy kolor litery możemy uzyskać ciekawy efekt inicjału rozpoczynającego na przykład rodział książki.

.text::first-letter {

	font: bold 20px Times New Roman;

	color: #F00;

	background: #CFC;

}

Zobacz przykład 3, ::first-letter.

Warto wspomnieć o fakcie, iż first-line oraz first-letter jako jedyne z grona pseudoelementów mają bardzo dobre wsprcie przeglądarek, w tym Internet Explorera od wersji 5!

Before

Dwa ostatnie pseudoelementy, before oraz after w ostatnim czasie okazują się być bardzo przydatne dla osób, które próbują eksperymentować i uzyskiwać ciekawe efekty za pomocą samego CSS3. Przykładem użycia before może być chociażby próba zmiany koloru dla wypunktowania listy. Oczywiście można nadać kolor elementowi li listy, a następnie wewnątrz niego umieścić span, któremu nadamy domyślny kolor tekstu, ale po co kombinować i odawać nadmiarowe kontenery, jeśli można skorzystać z dobroci pseudoelementów:

li {

	display: block;

	list-style-position: inside;

}

li::before { 

	content:" • ";  

	color: #F00;

	background: #CCF;

}

Zobacz przykład 4, ::before.

Dzięki takiemu podejściu nie musimy dodawać zbędnych elementów do struktury DOM lub niepotrzebnie definiować i nadpisywać style dla tekstu.

After

Pseudoelement after może przydać się razem z before do uzyskania chociażby ciekawego efektu kilku zdjęć spiętych spinaczem biurowym. W tym efekcie można było zrezygnować z potrójnie zagnieżdżonego elementu span na rzecz tylko jednego z użyciem pseudoelementów before i after, dzięki czemu oszczędzamy na strukturze DOM, a kod wygląda po prostu ładnie.

.aboutImg span::before {

	display: block;

	content: '';

	position: absolute;

	top: -15px;

	right: 30px;

	width: 14px;

	height: 54px;

	z-index: 1;

	border: 2px solid #999;

	-moz-transform: rotate(4deg);

	-webkit-transform: rotate(4deg);

	-moz-box-shadow: 1px 1px 1px #555, inset 1px 1px 1px #555;

	-webkit-box-shadow: 1px 1px 1px #555, inset 1px 1px 1px #555;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

}

.aboutImg span::after {

	display: block;

	content: '';

	position: absolute;

	top: -8px;

	right: 25px;

	width: 8px;

	height: 8px;

	background: #fff;

	z-index: 2;

}

Zobacz wpis o użyciu ::before i ::after do uzyskania efektu kilku zdjęć spiętych spinaczem biurowym, lub finalny efekt.

Value, choices, repeat-item, repeat-index

Pozostałości po XForms, module formularzy XHTML 2.0. Prace nad XHTML w wersji 2 zostały porzucone na rzecz rozwoju HTML 5.

Dodatkowe materiały

Z użyciem pseudoelementów można uzyskać ciekawe efekty, na przykład Układ Słoneczny, można także dzięki nim wykonać podmianę obrazków. Warto zajrzeć do wpisu o wsparciu pseudoelementów before i after przez przeglądarki, a także zapoznać się z dokumentacją W3 Schools, albo przeczytać artykuł Smashing Magazine o before i after.