# CSS селектори С помощта на CSS селекторите се задава по отношение на кои HTML елементи да бъде приложено дадено стилизиране. ### Базисни селектори * Селектиране на елементи от даден таг ``` /* сeлектира всички елементи с таг

*/ 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; }

Some text

``` * Универсален селектор ``` /* селектира всички елементи от страницата */ * { margin: 0; padding: 0; box-sizing: border-box; } ``` ### Комбинирани селектори * a b - селектира всички елементи b, вложени в a ``` /* селектира всички параграфи, вложени в
*/ 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. Стилове по подразбиране на браузъра Повече селектори: --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://programmingfundamental.gitbook.io/programmingwithjava/internet-tekhnologii/lab2/cascading-style-sheets-css/css-selektori.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.