10 selektorów CSS, bez których nie możesz się obejść

Najnowsza specyfikacja CSS3 wprowadziła wiele atrakcyjnych nowości, dzięki którym witryny mogą wyglądać znaczniej ciekawiej. W tym artykule niestety nie będzie o nowościach, skupimy się natomiast na omówieniu selektorów, które na pewno znacie, ale o których być może zapomnieliście. Poniżej przedstawiamy Wam listę 10 selektorów, z którymi definiowanie stylów strony będzie łatwiejsze.

---

Fundamenty CSS - stylowanie stron od podstaw

Twórz wspaniałe strony z użyciem niesamowitych możliwości współczesnego CSS. Poznaj od zera techniki stylowania stron z kaskadowymi arkuszami stylów. Dowiedz się więcej

---

*

Selektor, czyli tzw. selektor uniwersalny pozwala ustalić formatowanie dla wszystkich elementów strony, niezależnie od ich typu np. li, h1, a. Można go np. zastosować do ustawienia rozmiaru marginesów lub domyślnych czcionek na stronie.

* {
    font-family: Arial, Helvetica;
    margin 0;
    padding 0;
}

Niestety niektóre starsze przeglądarki mogą mieć problem z odpowiednim interpretowaniem tego selektora, dlatego przy bardziej istotnych elementach zalecane jest używanie body.

A > B

Selektor dziecka pozwala nam odnieść się do elementu, który leży o jeden rząd niżej w hierarchii dokumentu. Jeżeli np. chcielibyśmy uzyskać odmienny wygląd listy uporządkowanej i nieuporządkowanej to dodajemy następujący kod:

ul > li {
    color: red;
    font-size: 10px;
}

ol > li {
    color: green;
    font-size: 12px;
}

A + B

Selektor ten nada formatowanie elementowi A, jeżeli ten bezpośrednio sąsiaduje z elementem B (oba elementy muszą mieć tego samego rodzica) . Jeżeli chcesz zdefiniować styl każdego elementu span, który znajduję się bezpośrednio po nagłówku p to zapisujesz:

p + span {
    margin-bottom: 20px;
    font-size: 14px;
}

A[href*=”example”]

Ten selektor jest idealnym narzędziem do formatowania konkretnych linków. Jeżeli np. chcielibyśmy, aby wszystkie linki prowadzące do portalu Facebook, wyglądały tak: facebook, musimy użyć tego kodu:

a[href*="facebook"] {
    font-family:verdana;
    font-weight:bold;
    color: white;
    background: #3b5999;
    text-decoration: none;
}

Jeżeli przy powyższym selektorze nie użyjemy znaku gwiazdki to style zostaną przypisane linkom, które zawierają dokładnie to, co podaliśmy w cudzysłowie.

A:not(B)

Selektor negacji pomoże nam w sytuacji, gdy chcielibyśmy zmienić np. kolor czcionki wszystkich elementów na stronie z wykluczeniem stopki. Zamiast zmieniać wygląd tych elementów i dodatkowo definiować osobno styl stopki, możemy to zrobić prościej:

div:not(.footer) {
    color:green; 
}

A:first-child / A:last-child

Selektory te wskazują na elementy, które są pierwszym lub ostatnim dzieckiem swojego rodzica. Można np. określić formatowanie tylko pierwszej pozycji na liście nieuporządkowanej:

ul li:first-child { border: dotted; }

A:nth-child(n)

Ten selektor pomoże Wam odszukać elementy (wg określonego wzoru) będące dzieckiem swojego rodzica. Selektor rozpoczyna liczenie dzieci od pierwszego do ostatniego dziecka.

ul li:nth-child(3) {
    background: #ccc;
}

W nawiasie możemy wpisać konkretną liczbę albo własny wzór wyszukiwania, np. po wpisaniu 3n, wybrane zostaną dzieci nr 3, 6, 9 itd.

A:nth-last-child(n)

Selektor ten działa dokładnie tak samo jak nth-child tylko z tym, że liczenie rozpoczyna od ostatniego dziecka. Aby wybrać przedostatni element należy wpisać:

ul li:nth-last-child(2) {
    background: #ccc;
}

A:nth-of-type(n)

Łatwo można zgadnąć jak działa ten selektor – wyszukuje n-ty z kolei element typu A. Jeżeli chcesz sformatować trzeci paragraf w divie to kod będzie wyglądał następująco:

div p:nth-of-type(3) {
    color: #fff;
    background: #000;
}

A:visited

Bardzo przydatny selektor dzięki któremu możemy zdefiniować odmienny styl odwiedzonych już linków – znacznie ułatwi to poruszanie się po stronie. Zapewne wiele razy spotkaliście się z tym, gdy potrzebowaliście znaleźć niedawno odwiedzoną stronę w długiej liście wyników wyszukiwania.

a:visited {
    background: red;
    color: white;
}

Używanie tych selektorów pozwoli Wam zaoszczędzić cenny czas i pomoże zachować czytelność kodu. Znaliście już wcześniej te selektory? Często ich używacie? A może znacie inne, ciekawsze? Będziemy wdzięczni jeżeli podzielicie się nimi w komentarzach. Do usłyszenia!