Kilka przydatnych znaczników CSS, które warto mieć w zanadrzu

Znalazłeś się kiedyś w sytuacji, gdy Twój kod CSS zaczęły wypełniać pokręcone selektory długości dwóch linii? Konieczność częstego wynajdowania mało eleganckich rozwiązań, może oznaczać, że już czas odświeżyć sobie znaczniki CSS.

Pseudoselektory *-of-type

Warunek można zastosować na przykład po to, by wybrać pierwszy element o określonym typie spośród rodzeństwa.

See the Pen zdYrOX by Kamil (@KamilNaja) on CodePen.

Pseudoselektory *-child

Warunek działa inaczej niż poprzedni, ponieważ zawsze wybiera pierwsze (lub kolejne, w zależności od selektora), węzły, bez zwracania uwagi na ich typ. Zaznaczone będą także elementy zagnieżdżone, jeśli są pierwszymi dziećmi.

See the Pen vJYLNX by Kamil (@KamilNaja) on CodePen.

Selektor >

Działa podobnie do poprzednich dwóch, jednak zaznacza wszystkie elementy, które są bezpośrednimi potomkami danego elementu, bez zwracania uwagi na ich typ.

:empty

Nadaje stylowanie pustym elementom. Dzięki niemu, możesz ukryć na przykład domyślny border, który nie może pozostać w przypadku pustych elementów.

See the Pen VzweZv by Kamil (@KamilNaja) on CodePen.

Selektor +

Jego składnia wygląda następująco:

div + ul {

border: solid;

}

Odwołuje się do drugiego elementu, który jest bezpośrednio poprzedzony elementem, który występuje w składni jako pierwszy. W tym przypadku, ul będzie miało border, jeśli będzie poprzedzone przez diva.

See the Pen MvWKYP by Kamil (@KamilNaja) on CodePen.

Selektor ~

Działa podobnie do poprzedniego, jednak element nie musi być poprzedzony bezpośrednio.