Odkrywamy zaawansowane techniki CSS: złożone selektory

:not()

Pseudoklasa negacji :not() pozwala odnosić się do elementów, które nie pasują do selektora w nawiasie.
Przykładowo, jeśli chcesz nadać styl wszystkim elementom input, oprócz tych, które są guzikami „submit”, możesz skorzystać poniższego selektora.

Kolejny przykład: chcesz ustalić większą czcionkę wszystkim akapitom, oprócz tego, który wyświetla datę i czas? Nic prostszego:

Obsługa przez przeglądarki

Pseudoklasa :not() nie jest obsługiwana nawet przez IE8. Niestety, oznacza to, że minie prawdopodobnie jeszcze sporo czasu zanim zacznie się ona często pojawiać w naszych arkuszach CSS.

Pseudoelementy

Użycie pseudoelementów to sposób na odniesienie się do elementów, które tak naprawdę nie istnieją w kodzie HTML, takich jak pierwsza litera czy też pierwsza linia bloku tekstu.

Pseudoelementy występowały w CSS 2.1, ale specyfikacja trzeciego wydania określa, że powinny być zapisywane z podwójnym dwukropkiem, dla odróżnienia od pseudoklas. Te pseudoelementy, które występowały w CSS 2.1, były zapisywane przy użyciu pojedynczego dwukropka, przeglądarki powinny więc obsługiwać obydwa sposoby zapisu („:” oraz „::”). Natomiast nowe pseudoelementy, wprowadzone w CSS3, będą musiały być zapisywane tylko i wyłącznie z podwójnym dwukropkiem.

::first-line

Odnosi się do pierwszej linii bloku lub nagłówka/elementu tabeli.

Najczęściej jest stosowany, aby „upiększyć” blok tekstu, np. zmieniając pierwszą linię w kapitaliki.

Jeśli czytałeś dokładanie ten artykuł, wiesz z pewnością, że powyższy selektor odnosi się do pierwszej linii akapitu, który występuje zaraz za tagiem <h1>.

Krokiem dalej jest zmiana stylu konkretnego akapitu, w tym przypadku pierwszego dziecka DIV-a o klasie post.

::first-letter

Ten pseudoelement odnosi się do pierwszego znaku (litery) danego bloku tekstu. Podobnie jak ::first-line jest często stosowany, aby wyróżnić ten element tekstu. Jeśli zastosujesz oba pseudoelementy, zarówno ::first-letter, jak i ::first-line, właściwości tego pierwszego będą ważniejsze niż te, odziedziczone od ::first-line.

Ten selektor ma najdłuższą specyfikację, spośród wszystkich w CSS. Warto przeczytać ją przed zastosowaniem tego pseudoelementu (to odnosi się także do każdego innego, który stosujesz).

::before and ::after

::before oraz ::after są stosowane, aby dodać treści do dokumentu poprzez CSS. Treść wstawiona odziedziczy większość właściwości elementu, do którego jest wstawiana.

Teraz wyobraź sobie, że do opisu każdego z wykresów na Twojej stronie chcesz dodać tekst „Wykres numer X”. Możesz osiągnąć to bez konieczności stosowania języków skryptowych, a nawet bez ingerencji w HTML.

Ale o co chodzi? Najpierw tworzymy licznik o nazwie image. Następnie, przed każdym akapitem o klasie description wstawiamy, korzystając z pseudoelementu ::before treść „Wykres numer” oraz obecną wartość licznika. Dodatkowo, po każdym użyciu należy wartość licznika inkrementować (counter-increment: image;).

:before oraz ::after są najczęściej stosowane z właściwością content, aby dodać krótkie zdania lub elementy do określonych miejsc na stronie. W powyższym przykładzie pokazałem, jak można je wykorzystać w poważniejszych zadaniach.

Obsługa przez przeglądarki

Pseudoelementy są obsługiwane przez IE8, pod warunkiem zapisu z jednym dwukropkiem. Wszystkie inne przeglądarki również obsługują te selektory.

Podsumowanie

Jeśli przebrnąłeś przez gąszcz pseudoklas, pseudoelementów i innych dziwnych selektorów, nadszedł czas abyś wypróbował je w praktyce. W razie problemów, czytaj specyfikacje W3C i pytaj na naszym forum.
A jeśli masz ochotę na eksperymenty, do swojego następnego projektu, zamiast stosować klasy i identyfikatory, przemyć kilka spośród opisanych selektorów CSS. Obiecuję, już nigdy nie będziesz chciał komplikować swojego kodu tymi niepotrzebnymi klasami i ID.

Przydatne linki

•    Keeping Your Elements’ Kids in Line with Offspring — A List Apart
•    Selectutorial - CSS selectors
•    A Look at Some of the New Selectors Introduced in CSS3
•    Selektory CSS 2.1, część pierwsza i druga
•    CSS 3 selectors explained
•    CSS selectors and pseudo selectors browser compatibility
•    10 Useful CSS Properties Not Supported By Internet Explorer
•    Styling a Poem with Advanced CSS Selectors