Css селектори by alexey kalyuzhnyi

Як працює селектор по тегам

Як працює селектор по класах

Селектори по атрибут

• [Class] - тег містить цей атрибут
• [Class = "box"] - конкретне значення атрибута
• [class

= "Box"] - атрибут містить дане слово

[Class ^ = "box"] - значення атрибута починається з даної послідовності символів

[Href $ = ". Pdf"] - значення атрибута закінчується на дану послідовність символів

[Class * = "box"] - значення атрибута містить дану послідовність символів

селектор атрибуту
[Attribute-name]

Селектор з конкретним значенням атрибута [class = "paragraph"]

Атрибут містить певне слово

Перші символи атрибута
[Class ^ = "box"]

Останні символи атрибута
[Href $ = "pdf"]

Послідовність символів в атрибуті
[Class * = "box"]

Псевдокласи

: Focus. enabled. disabled. checked

: First-child. last-child. only-child

: First-of-type. last-of-type. only-of-type

: Target. empty. not (selector)

Псевдоелементи