Selektory – część 2

Ostatnio poznaliście pierwszy zestaw selektorów (elementów i specjalne). Dzisiaj poznacie kolejne dwa zestawy.

 

Selektory atrybutów

[attr] – dowolny element, który ma ustawiony atrybut „attr”

 

[attr=”wart”] – dowolny element, który dla atrybutu „attr” ma wartość dokładnie „wart”

 

[attr~=”wart”] – dowolny element, którego atrybut „attr” ma wartości rozdzielone spacją i jedną z nich jest „wart”

 

[attr|=”wart”] – dowolny element, którego atrybut „attr” ma wartości rozdzielone łącznikiem (myślnikiem, znakiem minusa) i zaczyna się od „wart”

 

[attr^=”wart”] – dowolny element, którego wartość atrybut „attr” zaczyna się od „wart”

 

[attr$=”wart”] – dowolny element, którego wartość atrybutu „attr” kończy się na „wart”

 

[attr*=”wart”] – dowolny element, którego wartość atrybut u”attr” zawiera „wart”

 

Selektory pseudoelementów

::first-line – pierwsza linia – często wykorzystywane z akapitami (p:first-line)

 

::first-letter – pierwsza litera – również najczęściej wykorzystywane z akapitami

 

E::before – dodaje dodatkową treść przed elementem „E” (wymagane jest użycie „content”)

 

E::after – dodaje dodatkową treść po elemencie „E” (wymagane jest użycie „content”)

 

::selection – zaznaczenie na stronie (wspiera tylko takie style jak color, background-color, cursor, outline, text-decoration, text-emphasis-color, text-shadow)

 

::placeholder – dotyczy atrybutu „placeholder” w elementach formularza (input, textarea) (ograniczone tylko do font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height)


Post 2 z 3 z serii Selektory CSS