30 selektorów CSS które musisz zapamiętać!

() translation by (you can also view the original English article)

Znasz już podstawe selektory, id, class, i selektory potomków - i odpuszczasz? Jeśli tak to wiele Cię omija. Wiele selektorów wymienionych poniżej jest częscią specyfikacji CSS3, w konsekwencji są dostępne tylko w nowoczesnych przeglądarkach.

1. *

1	* {
2	margin: 0;
3	padding: 0;
4	}

Zacznijmy od oczywistych selektorów, dla początkujących, zanim przejdziemy do bardziej zaawansowanych.

Symbol gwiazdki obierze za cel każdy element znajdujący się na stronie. Wielu deweloperów używa tego triku by wyzerować margin i padding. Pomimo, że jest to dobry sposób do szybkich testów, polecałbym nie stosować tego w kodzie produkcyjnym. Obciąża to nadto wyszukiwarkę i jest niepotrzebne.

* może być również użyte z selektorem dziecka (ang. child selector).

1	#container * {
2	border: 1px solid black;
3	}

Ten kod obierze za cel każdy element div z id równym container Staraj się jednak nie używać tej techniki zbyt często, jeśli w ogóle.

Pokaż Demo

Kompatybilność

IE6+
Firefox
Chrome
Safari
Opera

2. #X

1	#container {
2	width: 960px;
3	margin: auto;
4	}

Symbol '#' (hash) pozwala nam wybrać cel na podstawie id.Jest to najpopularniejszy sposób wykorzystania, jednak bądź ostrożny używając go.

Zastanów się: czy rzeczywiście musisz nadać elementowi id by go wybrać?

Selektory id są niezmienne i jednorazowe. Jeśli to możliwe najpierw spróbuj użyć nazwy elementu, jednego z nowych elementów HTML5, lub pseudoklasy.

Pokaż Demo

Zgodność

IE6+
Firefox
Chrome
Safari
Opera

3. .X

1	.error {
2	color: red;
3	}

Jest to selektor klasy (ang. class). Różnica między nim a id jest taka, że klasą możesz wybrać wiele elementów. Użyj class jeśli chcesz nadać styl grupie elementów. Ewentualnie, użyj id by znaleźć i wystylizować tylko konkretny element.

Pokaż Demo

Zgodność

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

1	li a {
2	text-decoration: none;
3	}

Jednym z najpopularniejszych selektorów jest selektor potomka (ang. descendant). Jeśli musisz lepiej sprecyzować cel, używasz właśnie tego. Na przykład, jeśli zamiast zaznaczać wszystkie linki, chcesz wybrać tylko te, które znajdują się w nieuporządkowane liście? Jest to sprecyzowane, gdy używasz selektora potomka.

Porada profesjonalisty - jeśli Twój selektor wygląda tak X Y Z A B.error, to robisz to źle. Zawsze zastanów się czy musisz wrzucać takie obciążenie.

Pokaż Demo

Zgodność

IE6+
Firefox
Chrome
Safari
Opera

5. X

1	a { color: red; }
2	ul { margin-left: 0; }

Co jeśli chcesz zaznaczyć wszystkie elementy tego samego typu (ang. type), bez używania id lub class? Idź na łatwiznę i użyj selektora typu. Jeśli chcesz zaznaczyć wszystkie nieuporządkowane listy ('unordered lists'), użyj ul {}.

Pokaż Demo

Zgodność

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited and X:link

1	a:link { color: red; }
2	a:visted { color: purple; }

Pseudo-klasy :link używamy by zaznaczyć wszystkie linki które jeszcze nie były kliknięte.

Ewentualnie, używamy pseudo-klasy :visited, która jak się domyślasz, pozwala na dodanie stylu do linka na stronie który był kliknięty, lub odwiedzony.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

1	ul + p {
2	color: red;
3	}

Ten selektor odwołuje się do sąsiedniego selektora. Wybierze tylko ten element, który występuje bezpośrednio po wcześniej wymienionym elemencie. W tym przypadku, tylko pierwszy paragraf, po każdym ul będzie miał czerwony tekst.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

1	div#container > ul {
2	border: 1px solid black;
3	}

Różnica pomiędzy X Y a X > Y jest taka, że ten drugi wybiera tylko bezpośrednie dzieci. Na przykład.

1	<div id="container">
2	<ul>
3	<li> List Item
4	<ul>
5	<li> Child </li>
6	</ul>
7	</li>
8	<li> List Item </li>
9	<li> List Item </li>
10	<li> List Item </li>
11	</ul>
12	</div>

Selektor #container > ul weźmie za cel tylko ul, które są bezpośrednimi dziećmi div z id container. Nie zaznaczy jednak ul , które jest dzieckiem pierwszego li.

Dlatego jest wiele korzyści płynących z kombinatorów dzieci. Poleca się ten sposób przy pracy z JavaScriptem opartym na selektorach CSS.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

1	ul ~ p {
2	color: red;
3	}

Ogólny selektor następnika jest podobny do X + Y, ale jest mniej ścisły. Kiedy selektor następnika (ul + p) wybierze tylko pierwszy element występujący natychmiast po poprzednim selektorze, ten jest bardziej ogólny.Wybierze, odwołując się do przykładu wyżej, każdy element p jeśli tylko następuje po ul.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

1	a[title] {
2	color: green;
3	}

Odwołując się do tak zwanego selektora atrybutu,w przykładzie powyżej, wybierze on tylko element z atrybutem title. Linki, które go nie mają nie otrzymają stylu. Jednak co jeśli chciałbyś być bardziej dokładny? Zobaczmy...

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

1	a[href="https://net.tutsplus.com"] {
2	color: #1f6053; /* nettuts green */
3	}

Fragment powyżej nada styl wszystkim linkom prowadzącym do https://net.tutsplus.com; otrzymają one nasz firmowy zielony kolor. Pozostałe linki będą nienaruszone.

Zauważ, że wartość zawinęliśmy w cudzysłów. Pamiętaj by zrobić to samo przy selektorze CSS w JavaScripcie. W miarę możliwości zawsze używaj slektorów CSS zamiast nieoficjalnych metod.

Działa dobrze, ale jest nieco sztywne. Co jeśli link przekierowuje do Nuttuts+ , ale ścieżka to nettuts.com, zamiast pełnego url? W tej sytuacji możemy użyć zwykłą składnię.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*="nettuts"]

1	a[href*="tuts"] {
2	color: #1f6053; /* nettuts green */
3	}

Właśnie tego było nam potrzeba. Gwiazdka oznacza, że podana wartość musi wystąpić gdziekolwiek w wartości atrybutu. Dzięki temy wybrane zostanie nettuts.com, net.tutsplus.com, a nawet tutsplus.com.

Pamiętaj, że to szerokie pojęcie. Co jeśli link prowadzi do jakiejś strony nie-Envato z tuts w adresie? Gdy musisz być bardziej konkretny użyj^ i $,by odwołać się odpowiednio do początku i końca ciągu znaków.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^="http"]

1	a[href^="http"] {
2	background: url(path/to/external/icon.png) no-repeat;
3	padding-left: 10px;
4	}

Czy zastanawiałeś się, jak niektóre strony są w stanie umieścić ikonki zaraz obok linku do zewnętrznej strony? Jestem pewny, że już wcześniej się z nimi spotkałeś; przypominają nam, że link przekieruje nas na zupełnie inną stronę.

Najczęściej jest wykorzystywane w wyrażeniach, by oznaczyć początek ciągu znaków. Jeśli chcemy obrać za cel wszystkie linki, które mają href zaczynające się od http, możemy skorzystać z selektora podanego powyżej.

Zauważ, że nie szukamy https://; jest to zbędne i dodatkowo nie bierze pod uwagę adresów zaczynających się od https://.

Co jeśli chcemy wystylizować wsszystkie linki które prowadzą do np. zdjęcia? W takim wypadku, odwołajmy się do końca ciągu.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=".jpg"]

1	a[href$=".jpg"] {
2	color: red;
3	}

Ponownie używamy zwykłego symbolu $, zwracając się do końca ciągu.W tym wypadku szukamy wszystkich linków prowadzących do obrazka -- lub conajmniej do tego, który kończy się .jpg. Zapamięta, że to nie podziała na gif i pngs.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*="foo"]

1	a[data-filetype="image"] {
2	color: red;
3	}

Wróć do punktu ósmego; jak zwrócić się do wszystkich typów obrazów png, jpeg,jpg, gif? Możemy stworzyć multi-selektory, w ten sposób:

1	a[href$=".jpg"],
2	a[href$=".jpeg"],
3	a[href$=".png"],
4	a[href$=".gif"] {
5	color: red;
6	}

Jest to jednak upierdliwe i neefektywne. Innym rozwiązanie jest użycie stałych atrybutów.Co jeśli dodamy nasz własny atrybut data-filetype do każdego z linków do obrazu?

1	<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Wtedy, z kotwicą na miejscu możemy użyć standardowego selektora by ucelować te linki .

1	a[data-filetype="image"] {
2	color: red;
3	}

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]

 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

A oto trik, którym zaimponujesz kolegom. Niewielu o tym wie. Tylda (~) pozwala na ucelowanie atrybutu, który ma oddzielone spacją różne wartości.

Biorąc za przykład nasz atrybut z punktu 15 możemy stworzyć atrybut data-info, który może otrzymać oddzieloną spacją listę wszystkiego co chcemy zanotować.W tym przypadku zanotujemy zewnętrzne linki i linki do obrazów - dla przykładu.

1	"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Dzięki temu przy użyciu '~' możemy zaznaczyć każdy element który posiada którąkolwiek wartość .

/* Weź za cel atrybut data-info który zawiera wartość "external" */
a[data-info~="external"] {
   color: red;
}

/* Który zawiera wartość "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

Nieźle, co?

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

1	input[type=radio]:checked {
2	border: 1px solid black;
3	}

Ta pseudo-klasa obierze za cel tylko sprawdzone elementy - jak przycisk radio lub checklist. To takie proste

Pokaż Demo

Zgodność

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

Pseudo-klasy before i after wymiatają. Każdego dnia ludzie znajdują nowe, kreatywne sposoby na efektywne ich użycie. Tworzą one treść wokół wybranego elementu.

Wielu poznało te klasy kiedy spotkało się z trikiem clear-fix.

.clearfix:after {
content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

Wykorzystując ten trik z :after dodajemy miejsce po elemencie i go czyścimy. Jest to świetny trik do poznania, wyjątkowo korzystny gdy metoda overflow: hidden; nie jest możliwa.

Kolejny kreatywny sposób do wykorzystania nawiązuje do szybkiego sposobu na tworzenie cieni..

Zgodnie ze specyfikacją selektorów CSS3, powinieneś używać kodu z dwoma dwókropkami ::. Lecz, by zachować kompatybilność, przeglądarka akceptuje pojedyńczy dwukropek. W chwili obecnej jest to nawet wskazane w projektach.

Zgodność

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

1	div:hover {
2	background: #e3e3e3;
3	}

No dalej, przecież znasz ten przykład. Oficjalny termin to pseudo-klasa akcji użytkownika. Brzmi myląca, ale takie nie jest. Chcesz nadać specjalny wygląd, gdy użytkownik najedzie kursorem na dany element? Ta pseudo-klasa to zagwarantuje!

Pamiętaj że starsza wersja Internet Explorer nie odpowiada gdy :hover jest nadane innemu elementowi niż link.

Najczęsciej będziesz tego używał gdy np. nadasz border-bottom linkom gdy na nie najedziesz.

1	a:hover {
2	border-bottom: 1px solid black;
3	}

Porada profesjonalisty - border-bottom: 1px solid black; wygląda lepiej niż text-decoration: underline;.

Zgodność

IE6+ (W IE6, :musi być dodane do linku)
Firefox
Chrome
Safari
Opera

20. X:not(selektor)

1	div:not(#container) {
2	color: blue;
3	}

Negująca pseudo-klasa jest szczególnie pomocna. Załóżmy, że chcę wybrać wszystkie elementy div, oprócz jednego z id container. Fragment powyżej wykona to zadanie idealnie.

Lub jeśli chciałbym wybrać każdy pojedyńczy element (niezalecane), oprócz paragrafów, możemy wtedy użyć:

1	*:not(p) {
2	color: green;
3	}

Pokaż Demo

Zgodność

IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement

1	p::first-line {
2	font-weight: bold;
3	font-size: 1.2em;
4	}

Możemy użyć pseudo-elementu (poprzedzonego::) by wystylizować elementy takie jak pierwsza linia czy pierwsza litera. Zapamiętaj, że muszą one być dodane do elementów blokowych, by zadziałały.

Pseudo-elementy są tworzone poprzez użycie dwóch dwukropków ::

Obierz za cel Pierwszą Literę Paragrafu

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

Ten kod znajdzie wszystkie paragrafy na stronie, a następnie wybierze tylko pierwsze litery tych paragrafów.

Jest to najczęściej wykorzystywane do nadania stylu pierwszej literze, podobnie jak w gazetach.

Obierz za cel Pierwszą Linię Paragrafu

1	p::first-line {
2	font-weight: bold;
3	font-size: 1.2em;
4	}

Podobnie, pseudo-element ::first-line nada styl tylko pierwszemu wierszowi paragrafów.

"W ramach zgodności z już istniejącymi arkuszami stylów, wyszukiwarki muszą zaakceptować korzystanie z jednego dwukropka przed pseudo-elementami, które było zaprezentowane w CSS1 i CSS2 (:first-line, :first-letter, :before i :after). Ta kompatybilnośc nie jest dopuszczona do nowych pseudo-elementów zaprezentowanych w tej specyfikacji. " - Źródło

Pokaż Demo

Zgodność

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

1	li:nth-child(3) {
2	color: red;
3	}

Pamiętacie te dni, gdy nie mieliśmy możliwości określić dokładnego elementu w stosie? Pseudo-klasa nth-child rozwiązuje ten problem!

Pamiętaj, że nth-child akceptuje tylko naturalne liczby i zaczyna się od 1. Jeśli chcesz wybrać drugi element z listy użyj li:nth-child(2).

Możemy tego użyć by wybrać grupę elementów. Na przykład użyjemy li:nth-child(4n) by wybrać co czwarty element listy..

Pokaż Demo

Zgodność

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-last-child(n)

1	li:nth-last-child(2) {
2	color: red;
3	}

Co jeśli mamy ogromną listę elementów w ul, a potrzebujemy zaznaczyć, powiedzmy trzeci element od końca? Zamiast li:nth-child(397), możesz użyć pseudo-klasy nth-last-child.

Ta pseudo-klasa działa prawie identycznie jak ta z numerem 16, poza tym że zaczyna liczyć od końca i porusza się w górę stosu.

Pokaż Demo

Zgodność

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-of-type(n)

1	ul:nth-of-type(3) {
2	border: 1px solid black;
3	}

Zarzą się sytuację, gdy zamiast dziecka, będziesz chciał wybrać elementy zgodnie z jego typem.

Wyobraź sobie znacznik, który zawiera pięć nieuporządkowanych list. Jeśli chesz nadać styl tylko trzeciemu ul, i nie ma on przypisanego id, to możesz skorzystać z nth-of-type(n). W przykładzie powyżej obramowanie zostanie nadane tylko trzeciemu ul.

Pokaż Demo

Zgodność

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-last-of-type(n)

1	ul:nth-last-of-type(3) {
2	border: 1px solid black;
3	}

Możemy również użyć nth-last-of-type by zacząćod końca i dążyć do wybranego elementu.

Zgodność

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

1	ul li:first-child {
2	border-top: none;
3	}

Ta pseudo-klasa pozwalanam wybrać wyłącznie pierwsze dziecko elementu. Często będziesz z tego korzystał chcąc usunąć obramowanie z pierwszego i ostatniego elementu listy.

Przypuśćmy, że masz listę wierszy i każdy ma nadane border-top i border-bottom. Z takim ustawieniem pierwszy i ostatni element będą wyglądać dziwnie.

Wielu designerów korzysta z klas first i last by to osiągnąć. Możesz jednak skorzystac z wyżej podanych pseudo-klas.

Pokaż Demo

Zgodność

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

1	ul > li:last-child {
2	color: green;
3	}

W przeciwieństwie do first-child, last-child zaznaczy ostatni element rodzica.

Przykład

Zbudujmy dla przykładu wystylizowaną liste elementów by zademonstrować użycie tych klas.

Kod

1	<ul>
2	<li> List Item </li>
3	<li> List Item </li>
4	<li> List Item </li>
5	</ul>

Nic specjalnego, ot zwykla lista.

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

Ten kod nada tło, usunie domyślny 'padding' elementu ul,i doda obramowanie do każdego elementu li by nadać trochę głębi.

By dodać głębie do listy, zastosuj border-bottom do każdego li, które jest ton lub dwa ciemniejsze od tła li. Następnie dodaj border-top, które jest kilka tonów jasniejsze.

Jedyny problem to jak widać dodanie obramowań do pierwszego i ostanitego elementu listy, użyjmy pseudo-klas :first-child i :last-child by to naprawić.

li:first-child {
border-top: none;
}

li:last-child {
   border-bottom: none;
}

Naprawione!

Pokaż Demo

Zgodność

IE9+
Firefox
Chrome
Safari
Opera

Tak - IE8 obsługuje :first-child,ale nie :last-child. Weź ich zrozum.

28. X:only-child

1	div p:only-child {
2	color: red;
3	}

Prawdę mówiąc pseudo-klasy only-child nie będziesz używał prawie wcale. Mimo to jest dostępna, jeśli będziez jej potrzebował.

Pozwala ona na wybranie elementów które są jedynymi dziećmi rodziców. Tłumacząc przykład powyżej, tylko paragrafowi który jest jedynym dzieckiem div będzie nadany czerwony kolor.

Weźmy pod uwagę następujący przykład.

<div><p> My paragraph here. </p></div>

<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

W tym przypadku paragraf w drugim div nie będzie brany pod uwagę; jedynie przerwszy div. Z chwilą, gdy dodajesz więcej elementów dzieci do rodzica, pseudo-klasa only-child przestaje działać.

Pokaż Demo

Zgodność

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

1	li:only-of-type {
2	font-weight: bold;
3	}

Ta pseudo-klasa może być użyta na kilka ciekawych sposobów. Obierze za cel tylko te elementy, które nie mają rodzeństwa. Na przykład zaznaczmy wszystkie ul, które mają tylko jeden element w liście.

Najpierw zastanów się jak tego dokonać? Możesz skorzystać z ul li, ale to wybierze wszystkie elementy listy. Jedynym rozwiązaniem będzie użycie only-of-type.

1	ul > li:only-of-type {
2	font-weight: bold;
3	}

Pokaż Demo

Zgodność

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

Pseudo-klasa first-of-type pozwala wybrać pierwszy element z rodzeństwa danego typu.

Test A

By lepiej to zrozumieć, przeprowadźmy test. Skopiuj poniższy kod do swojego edytora:

1	<div>
2	<p> Mój paragraf. </p>
3	<ul>
4	<li> 1 Element Listy </li>
5	<li> 2 Element Listy </li>
6	</ul>
7
8	<ul>
9	<li> 3 Element Listy </li>
10	<li> 4 Element Listy </li>
11	</ul>
12	</div>

Teraz, bez czytania dalej, wybierz tylko "2 Element Listy". Gdy Ci się to uda (lub się poddasz), doczytaj dalej.

Rozwiązanie 1

Jest kilka sposobów na rozwiązanie tego. Przerobimy te przydatne. Zacznijmy od użycia first-of-type.

1	ul:first-of-type > li:nth-child(2) {
2	font-weight: bold;
3	}

Ten kod mówi "znajdź pierwszą nieuporządkowaną listę na stronie, następnie poszukaj bezpośredniego dziecka, które jest elementem listy. Następnie ogranicz się do wybrania tylko drugiego elementu listy."

Rozwiązanie 2

Inną możliwością jest skorzystanie z selektora brata.

1	p + ul li:last-child {
2	font-weight: bold;
3	}

W tym przypadku szukamy ul które występuje bezpośrednio po tagu p, a następnie szukamy ostatniego dziecka tego elemementu.

Rozwiązanie 3

Możemy robić z selektorami co tylko chcemy.

1	ul:first-of-type li:nth-last-child(1) {
2	font-weight: bold;
3	}

Tym razem chwytamy pierwsze ul na stronie, a następnie szukamy pierwszego elementu listy zaczynając od końca! :)

Pokaż Demo

Zgodność

IE9+
Firefox 3.5+
Chrome
Safari
Opera

Podsumowanie

Jeśli piszesz dla starszych przeglądarek, jak Internet Explorer 6, musisz być ostrożny korzystając z nowszych selektorów. Ale proszę, nie daj się zniechęcić do ich nauki. Bardzo byś sobie zaszkodził nie ucząc się ich. Upewnij się, by sprawdzić kompatybilność na tej liście. Ewentualnie możesz użyć świetnego skrzyptu Deana Edwarda IE9.js script , by móc korzystać z tych selektorów w starszych przeglądarkach.

Po drugie, podczas prac z bibliotekami JavaScript, jak np. JQuery, zawsze staraj się wykorzystać selektory CSS3, zamiast metod/selektorów, których dostarcza nam biblioteka. Dzięki temu kod bedzie działał szybciej, jako że silnik selektorów skorzysta z rodzimej analizy przeglądarki, a nie ze swojej.

Dzięki za przeczytanie i mam nadzieję, że wyłapałeś trika lub dwa!