CSS-селектори та їх види

CSS-селектори – це певна CSS-структура, що дозволяє вибрати певний елемент в HTML-коді і стилізувати його. Кожен з них володіє своєю специфічністю, тобто може перекривати за властивостями інші, більш «слабкі».

Селектор CSS по тегу і класу

Найпростіші селектори – по тегу і за класом. Селектор по тегу самий загальний і вибирає всі елементи з визначеним тегом. Наприклад, можна написати властивості CSS-код наступного виду: p {color: blue}», де «p» – тег абзацу, а властивість «color: blue» позначає колір тексту. В результаті текст у абзацах забарвиться в синій колір. Селектори по тегу можна перерахувати через кому, тоді не потрібно буде писати властивість двічі.

Якщо деяким абзаців присвоїти якийсь клас, наприклад «blue», тоді спрацьовування селектора CSS можна настроїти ще більш точно. Але його запис у властивостях буде відрізнятися – перед назвою класу з’явиться точка. Тобто, щоб вибрати всі абзаци, яким присвоєно клас «blue» і пофарбувати їх в синій колір, потрібно властивості CSS написати такий код: «.blue: {color: blue}». Цей селектор більш специфічний, ніж CSS-селектор по тегу, і сильніше його, але відноситься до найбільш простим. Існують і більш складні правила, що дозволяють вибирати невеликі групи елементів.