*/ p { color: #222; font-size: 16px; } /* селектира едновременно всички заглавия от ниво 3 и всички параграфи */ h3, p { color: #222; font-size: 16px; } ``` * Селектиране по клас ``` /* сeлектира всички елементи, по отношение на които е зададен атрибут class="some-style" */ .some-style { color: darkblue; font-size: 18px; } /* сeлектира всички div елементи, по отношение на които е зададен атрибут class="another-style" */ div.another-style { margin: 20px; padding: 10px; } ``` * Селектиране по идентификатор (id) ``` /* сeлектира елемента с id="first" */ #first { text-transform: uppercase; }

*/ div p { color: red; }

Този елемент ще бъде селектиран

Този елемент НЯМА да бъде селектиран

``` * a > b - селектира всички елементи b, вложени на първо ниво в a ``` /* селектира всички параграфи, вложени на първо ниво в

*/ div > p { color: red; }

Този елемент ще бъде селектиран

Този елемент НЯМА да бъде селектиран

``` * a + b - селектира всички елементи b, които се намират непосредствено след a ``` /* селектира всички параграфи, разположени непосредствено след

*/ div + p { color: red; }

Този елемент НЯМА да бъде селектиран

Този елемент ще бъде селектиран

Този елемент НЯМА да бъде селектиран

``` * a \~ b - селектира всички елементи b, предшествани от a, когато a и b имат един и същи родителски елемент ``` /* селектира всички параграфи, разположени след

, когато се намират в един и същи родителски елемент */ div ~ p { color: red; }

Този елемент НЯМА да бъде селектиран

Този елемент ще бъде селектиран

Този елемент НЯМА да бъде селектиран

``` ### Псевдоселектори * За състояние - стилът се прилага към елемента въз основа на неговото състояние; * За псевдоелементи, дефиниращи част от елемент ``` /* Селектира непосетена хипервръзка */ a:link { color: red; } /* Селектира посетена хипрвръзка */ visited { color: green; } /* Селектира хипервръзка с поставен курсор върху нея */ a:hover { color: grey; } /* Селектира хипервръзка, върху която е натиснат ляв бутон на мишката */ a:active { color: blue; } ``` ### Селектори по атрибут Селектира елементи със зададени специфични атрибути или стойности ``` /* Селектира контроли от тип text и password */ input[type=text], input[type=password] { width: 90%; } ``` ### Приоритети при прилагане на стилизирането 1. !important 2. Инлайн стилове 3. Стилове, добавени с помощта на селекции по id 4. Стилове, добавени с помощта на селекции по клас 5. Стилове, добавени с помощта на селекции по таг 6. Стилове по подразбиране на браузъра Повече селектори:

Some text