СЕЛЕКТОРИ CSS Селектор - це група об'єктів, об'єднаних певними особливостями, до яких можна застосувати спільний стиль. На даній сторінці застосовані наступні стилі:

Селектор по елементу	Селектор по класу	Селектор по id	Контекстний селектор	Універсальний селектор *
h5{text-transform: uppercase;}	.aaa{text-decoration: underline;}	#bbb{font-variant: small-caps;}	p strong{text-shadow: 1px 1px 3px;}	*{box-sizing: border-box;}
Всі літери верхнім регістром для заголовків 5	У об'єктах (в даному випадку - div) із класом "aaa" текст підкреслений	У об'єктах (в даному випадку - div) із id "bbb" всі літери - маленьким капсом	Всі жирні слова (а конкретно - ті, що знаходяться в тегах <strong>) в абзацах будуть із тінню	Застосовується до всіх об'єктів; даний стиль змінює розрахунок загального розміру об'єктів
p {font-style: oblique;}	p.aaa {color: green;}	h5#bbb {text-align: center; text-transform: lowercase;}	td strong{font-size: 120%;}
Похилий текст для абзаців	У абзаців із класом "ааа" текст зелений	Всім заголовкам 5 із id="bbb" присвоюється нижній регістр і вирівнювання по центру	Всі жирні слова (а конкретно - ті, що знаходяться в тегах <strong>) у звичайних комірках таблиць будуть мати трохи більший розмір (на 120%)

Селектори можна комбінувати різними способами (навести курсор на результат, щоб подивитися синтаксис):

селектор1, селектор2	селектор1 селектор2	селектор1 + селектор2	селектор1 ~ селектор2	селектор1 > селектор2
Спільний стиль для кількох селекторів	Цей спосіб застосований в контекстному селекторі. Знаходить усі нащадки елемента, який підходить під селектор1, та застосовує до них стилі	Вибирає елемент, який підходить під селектор2, перед яким розташований елемент, що підходить під селектор1	Вибирає елемент, який підходить під селектор2, перед яким розташований елемент, що підходить під селектор1, але за умови, що обидва мають спільного предка	Вибирає елементи, які є прямими нащадками елемента, що підходить під селектор1
i, b {color: Chocolate;}	p span {color: blue;}	.first + .second {color: PaleVioletRed;}	p ~ p {word-spacing: 8px;}	.father > p {color: Purple;}
<i>Курсивний текст</i>, <b>жирний текст</b>, <strong>жирний текст</strong>	Цей стиль буде застосовуватися тільки до тексту із селектором span всередині абзацу. А ось текст із селектором span, що не знаходиться у абзаці.	Нехай у нас є абзац тексту Абзац 1 із класом first. Відразу за ним іде Абзац 2 із класом second, до якого і застосується стиль. Для прикладу іще Абзац 3 із класом second, що йде слідом за абзацом із класом second.	Наприклад, Абзац 1 предка div. Абзац 2 слідує за першим, отже до нього застосовується стиль. Слідом іде Абзац 3, але розташований уже поза div, а отже до нього стиль не застосовується.	Абзац 1 розташований безпосередньо у блоці div із класом "father", а отже являється його прямим потомком і до нього застосовується стиль Слідом в цьому ж блоці розташований іще один блок без класу, всередині якого теж знаходиться Абзац 2. Та цей абзац є не безпосереднім потомком, тому до нього стиль не застосовується А ось Абзац 3 знову прямий потомок. Складна схема, краще просто подивитися у вспливаюче віконце

ПСЕВДОКЛАСИ CSS
Для групи об'єктів, що слідують один за одним, можуть бути актуальні наступні псевдокласи:

:first-child, :last-child, :nth-child(n)	:first-of-type, :last-of-type, :nth-of-type(n)
Застосовується до відповідно першого, останнього та n-го дочірнього об'єкту, всього один раз на сторінці	Застосовується до відповідно першого, останнього та n-го дочірнього об'єкту, для кожного блоку окремо
samp:first-child {color: DarkSlateGray;} samp:nth-child(2) {color: Teal;} samp:last-child {color: SteelBlue;}	code:first-of-type {color: DarkOliveGreen;} code:nth-of-type(2) {color: MediumSlateBlue;} code:last-of-type {color: Chocolate;}
Об'єкт 1 samp всередині блоку, Об'єкт 2 code всередині блоку, Об'єкт 3 samp всередині блоку, Об'єкт 4 samp всередині блоку, Об'єкт 5 samp поза блоком, Об'єкт 6 samp поза блоком, Об'єкт 7 code поза блоком, Об'єкт 8 samp поза блоком	Об'єкт 1 code всередині блоку, Об'єкт 2 samp всередині блоку, Об'єкт 3 code всередині блоку, Об'єкт 4 code всередині блоку, Об'єкт 5 code поза блоком, Об'єкт 7 code поза блоком, Об'єкт 6 samp поза блоком, Об'єкт 8 code поза блоком

Є ще псевдокласи :not, :is, :where, :has. Детальніше за посиланням.
Для активних об'єктів, таких як кнопки та посилання, можуть знадобитися псевдокласи (навести курсор на об'єкт, щоб подивитися синтаксис):

:active	:hover	:visited
Задає стиль при натисканні на об'єкт	Задає стиль при наведенні на об'єкт	Для посилань: задає стиль відвіданим посиланням
button:active{border:solid 3px PaleVioletRed;}	button:hover{background-color: LightPink;}	a:visited{color: Purple;}
Кнопка	Кнопка	Посилання

Дані псевдокласи можна застосувати по відношенню до полів вводу (навести курсор на поле, щоб подивитися синтаксис):

Нехай у нас є поле, в яке необхідно ввести значення з діапазону від 100 до 300: <input id="id1" type="number" min="100" max="300">
:focus	:empty	:disabled	:valid	:invalid
Задає стиль, коли курсор знаходиться в полі	Задає стиль об'єктам, що не містять дочірніх об'єктів, наприклад пустим полям	Задає стиль об'єктам із параметром disable	Задає стиль правильно заповненому полю	Задає стиль неправильно заповненому полю
input:focus{outline: solid 5px Aquamarine;}	input:empty{background-color: Lavender;}	input:disabled{background-color: CadetBlue;}	input:valid + .validity-icon::before { content: '✓'; color: green; }	input:invalid + .validity-icon::before { content: '✖'; color: red; }

Ще є такі псевдокласи, як :read-write, :read-only, :placeholder-shown, :checked, :indeterminate, :in-range, :out-of-range, :required, :optional, :blank. Детальніше за посиланням.

ПСЕВДОЕЛЕМЕНТИ CSS .ccc::first-letter{font-size: 150%;} .ccc::first-line{font-style:normal;}

Це - абзац тексту із класом "ссс", а отже до нього застосовуються приведені вище псевдоелементи. Псевдо-елементи дозволяють стилізувати певні частини документа. Подвійна двокрапка була введена в CSS3 для візуальної відмінності псевдо-класів і псевдо-елементів. Однак, псевдо-елементи, які були додані ще в CSS2 (такі як: first-letter, first-line, before і after), можуть бути записані з однією двокрапкою, такий синтаксис використовувався до появи специфікації CSS3 і підтримується всіма браузерами. Синтаксис з подвійною двокрапкою підтримується тільки в нових версіях браузерів і в обов'язковому порядку повинен застосовуватися тільки до псевдо-елементу ::selection, доданого до CSS3.

Ще популярними являються псевдоелементи

::before і ::after, за допомогою яких можна додавати контент до і після об'єкту, наприклад, лапки до і після цитати.

Ще є такі псевдоелементи, як ::prefix, ::postfix, ::selection, ::target-text, ::spelling-error, ::marker, ::placeholder, ::file-selector-button. Детальніше за посиланням.