CSS (Cascading Style Sheets)— мова таблиць стилів, яка дозволяє прикріплювати стиль (наприклад, шрифти та колір) до структурованих документів (наприклад, документів HTML та додатків XML). Зазвичай CSS-стилі використовуються для створення та зміни стилю елементів веб-сторінок та інтерфейсів користувача, написаних на мовах HTML і XHTML, але також можуть бути застосовані до будь-якого виду XML-документа, у тому числі XML, SVG і XUL. Відокремлюючи стиль подання документів від вмісту документів, CSS спрощує створення веб-сторінок та обслуговування сайтів.

CSS підтримує таблиці стилів для конкретних носіїв, тому автори можуть адаптувати подання своїх документів до візуальних браузерів, слухових пристроїв, принтерів, брайлівських пристроїв, кишенькових пристроїв і т.д.

Каскадні таблиці стилів описують правила форматування елементів за допомогою властивостей та допустимих значень цих властивостей. Для кожного елемента можна використовувати обмежений набір властивостей, інші властивості не будуть впливати на нього.

Оголошення стилю і двох частин: селектораі оголошення. HTML імена елементів нечутливі до регістру, тому «h1» працює так само, як і «H1». Оголошення складається із двох частин: ім'я властивості (наприклад, color) та значення властивості (grey). Селектор повідомляє браузеру, який саме елемент форматувати, а в блоці оголошення (код у фігурних дужках) перераховуються команди, що форматують, — властивості та їх значення.

Мал. 1. Структура оголошення

Хоча наведений приклад намагається впливати лише на пару властивостей, необхідних рендерингу HTML-документа, він сам по собі кваліфікується як таблиця стилів. У поєднанні з іншими таблицями стилів (одна фундаментальна особливість CSS полягає в тому, що таблиці стилів об'єднуються), правило визначатиме остаточне подання документа.

Види каскадних таблиць стилів та їх специфіка

1. Види таблиць стилів

1.1. Зовнішня таблиця стилів

Зовнішня таблиця стилівце текстовий файл з розширенням.css , в якому знаходиться набір CSS-стилів елементів. Файл створюється в редакторі коду, як і HTML-сторінка. Усередині файлу можуть бути лише стилі, без HTML-розмітки. Зовнішня таблиця стилів підключається до веб-сторінки за допомогою тега , розташованого всередині розділу . Такі стилі працюють на всіх сторінках сайту.

До кожної веб-сторінки можна приєднати кілька таблиць стилів, послідовно додаючи кілька тегів. , вказавши в атрибуті тега media призначення цієї таблиці стилів. rel="stylesheet" вказує тип посилання (посилання на таблицю стилів).

Атрибут type="text/css" не є обов'язковим за стандартом HTML5, тому його можна не вказувати. Якщо атрибут відсутній, використовується значення type="text/css" .

1.2. Внутрішні стилі

Внутрішні стилівбудовуються в розділ HTML-документи та визначаються всередині тега. Внутрішні стилі мають пріоритет над зовнішніми, але поступаються вбудованим стилям (заданим через атрибут style).

...

1.3. Вбудовані стилі

Коли ми пишемо вбудовані стилі, ми пишемо CSS-код у HTML-файл, безпосередньо всередині тега елемента за допомогою атрибуту style:

Зверніть увагу на цей текст.

Такі стилі діють лише той елемент, котрій вони задані.

1.4. Правило @import

Правило @importдозволяє завантажувати зовнішні таблиці стилів. Щоб директива @import працювала, вона повинна розташовуватися в таблиці стилів (зовнішньої або внутрішньої) перед іншими правилами:

Правило @import також використовується для підключення веб-шрифтів:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Види селекторів

Селекторипредставляють структуру веб-сторінки. За допомогою них створюються правила для форматування елементів веб-сторінки. Селекторами можуть бути елементи, їх класи та ідентифікатори, а також псевдокласи та псевдоелементи.

2.1. Універсальний селектор

Відповідає будь-якому HTML-елементу. Наприклад, * (margin: 0;) обнуляє зовнішні відступи для всіх елементів сайту. Також селектор може використовуватися в комбінації з псевдокласом або псевдоелементом: *: after (CSS-стилі), *: checked (CSS-стилі).

2.2. Селектор елемент

Селектори елементів дозволяють форматувати всі елементи цього типу на всіх сторінках сайту. Наприклад, h1 (font-family: Lobster, cursive;) задасть загальний стиль форматування всіх заголовків h1.

2.3. Селектор класу

Селектори класу дозволяють задавати стилі для одного і більше елементів з однаковим ім'ям класу, які розміщені в різних місцях сторінки або на різних сторінках сайту. Наприклад, для створення заголовка з класом headline необхідно додати атрибут class зі значенням headline у ​​тег, що відкриває

і встановити стиль для зазначеного класу. Стилі, створені за допомогою класу, можна застосовувати до інших елементів не обов'язково даного типу.

.headline (text-transform: uppercase; color: lightblue; )

Якщо елемент має кілька атрибутів класу, значення об'єднуються з пробілами.

Інструкція користування персональним комп'ютером

2.4. Селектор ідентифікатора

Селектор ідентифікатора дозволяє форматувати одинконкретний елемент. Значення id має бути унікальним, на одній сторінці може зустрічатися лише один раз і має містити хоча б один символ. Значення не повинно містити пробілів.

Немає жодних інших обмежень на те, яку форму може набувати id , зокрема, ідентифікатори можуть складатися тільки з цифр, починатися з цифри, починатися з підкреслення, складатися тільки з розділових знаків і т. д.

Унікальний ідентифікатор елемента може використовуватися для різних цілей, зокрема, як спосіб посилання на конкретні частини документа з використанням ідентифікаторів фрагментів, як спосіб націлювання на елемент під час створення сценаріїв та спосіб стилізації конкретного елемента з CSS.

#sidebar (width: 300px; float: left; )

2.5. Селектор нащадка

Селектори нащадків застосовують стилі до елементів, що розташовані всередині елемента-контейнера. Наприклад, ul li (text-transform: uppercase;) - вибере всі елементи li, що є нащадками всіх елементів ul.

Якщо потрібно відформатувати нащадки певного елемента, цей елемент потрібно задати стильовий клас:

p.first a (color: green;) - даний стиль застосовується до всіх посилань, нащадків абзацу з класом first;

p .first a (color: green;) - якщо додати пробіл, то будуть стилізовані посилання, розташовані всередині будь-якого тега класу.first , який є нащадком елемента

First a (color: green;) - цей стиль застосовується до будь-якого посилання, розташованого всередині іншого елемента, позначеного класом. first.

2.6. Дочірній селектор

Дочірній елемент є прямим нащадком містить його елемента. Один елемент може мати кілька дочірніх елементів, а батьківський елемент кожного елемента може бути лише один. Дочірній селектор дозволяє застосувати стилі тільки якщо дочірній елемент йде відразу за батьківським елементом і між ними немає інших елементів, тобто дочірній елемент більше не вкладений.
Наприклад, p > strong — вибере всі елементи strong, які є дочірніми щодо елемента p.

2.7. Сестринський селектор

Сестринські відносини виникають між елементами, які мають спільного батька. Селектори сестринських елементів дозволяють вибрати елементи із групи елементів одного рівня.

h1 + p - вибере всі перші абзаци, що йдуть безпосередньо за будь-яким тегом

, не торкаючись інших абзаців;

h1 ~ p - вибере всі абзаци, які є сестринськими по відношенню до будь-якого заголовка h1 і йдуть відразу після нього.

2.8. Селектор атрибуту

Селектори атрибутів вибирають елементи на основі імені атрибута або значення атрибута:

[атрибут] - всі елементи, що містять вказаний атрибут, - всі елементи, для яких заданий атрибут alt;

селектор[атрибут] - елементи даного типу, що містять вказаний атрибут, img - тільки картинки, для яких задано атрибут alt;

селектор[атрибут="значення"] - елементи даного типу, що містять вказаний атрибут з конкретним значенням, img - всі картинки, назва яких містить слово flower;

селектор [атрибут ~ = "значення"] - елементи частково містять дане значення, наприклад, якщо для елемента задано кілька класів через пробіл, p - абзаци, ім'я класу яких містить feature ;

селектор [атрибут | = "значення"] - елементи, список значень атрибуту яких починається з вказаного слова, p - абзаци, ім'я класу яких feature або починається на feature;

селектор[атрибут^="значення"] - елементи, значення атрибуту яких починається з зазначеного значення, a - всі посилання, що починаються на http://;

селектор[атрибут$="значення"] - елементи, значення атрибуту яких закінчується вказаним значенням, img - всі картинки у форматі png;

селектор[атрибут*="значення"] - елементи, значення атрибуту яких містить у будь-якому місці вказане слово, a - всі посилання, назва яких містить book .

2.9. Селектор псевдокласу

Псевдокласи - це класи, практично не прикріплені до HTML-тегів. Вони дозволяють застосувати CSS-правила до елементів під час здійснення події або підпорядковується певному правилу. Псевдокласи характеризують елементи з наступними властивостями:

:hover - будь-який елемент, яким проводять курсором миші;

:focus - інтерактивний елемент, до якого перейшли за допомогою клавіатури або активували мишею;

:active — елемент, активований користувачем;

:valid - поля форми, вміст яких пройшов перевірку у браузері на відповідність зазначеному типу даних;

:invalid - поля форми, вміст яких не відповідає зазначеному типу даних;

: enabled - всі активні поля форм;

:disabled - заблоковані поля форм, тобто, що знаходяться в неактивному стані;

:in-range - поля форми, значення яких перебувають у заданому діапазоні;

:out-of-range - поля форми, значення яких не входять до встановленого діапазону;

:lang() — елементи з текстом зазначеною мовою;

:not(селектор) — елементи, які не містять зазначеного селектора — клас, ідентифікатор, назву або тип поля форми — :not() ;

:target - елемент із символом # , на який посилаються в документі;

:checked - виділені (вибрані користувачем) елементи форми.

2.10. Селектор структурних псевдокласів

Структурні псевдокласи відбирають дочірні елементи відповідно до параметра, зазначеного у круглих дужках:

:nth-child(odd) - непарні дочірні елементи;

:nth-child(even) - парні дочірні елементи;

:nth-child(3n) - кожен третій елемент серед дочірніх;

:nth-child(3n+2) - вибирає кожен третій елемент, починаючи з другого дочірнього елемента (+2);

:nth-child(n+2) - вибирає всі елементи, починаючи з другого;

:nth-child(3) - вибирає третій дочірній елемент;

:nth-last-child() — у списку дочірніх елементів вибирає елемент із зазначеним місцем розташування, аналогічно з:nth-child() , але починаючи з останнього, у зворотний бік;

:first-child - дозволяє оформити тільки перший дочірній елемент тега;

:last-child - дозволяє форматувати останній дочірній елемент тега;

:only-child - вибирає елемент, що є єдиним дочірнім елементом;

:empty - вибирає елементи, які не мають дочірніх елементів;

:root - вибирає елемент, що є кореневим у документі - елемент html.

2.11. Селектор структурних псевдокласів типу

Вказують на конкретний тип дочірнього тега:

:nth-of-type() - вибирає елементи за аналогією з: nth-child(), при цьому бере до уваги лише тип елемента;

:first-of-type - вибирає перший дочірній елемент даного типу;

:last-of-type - вибирає останній елемент даного типу;

:nth-last-of-type() — вибирає елемент заданого типу у списку елементів відповідно до зазначеного розташування, починаючи з кінця;

:only-of-type - вибирає єдиний елемент зазначеного типу серед дочірніх елементів батьківського елемента

2.12. Селектор псевдоелемента

Псевдоелементи використовуються для додавання вмісту, що генерується за допомогою властивості content:

:first-letter - вибирає першу букву кожного абзацу, застосовується лише до блокових елементів;

:first-line - Вибирає перший рядок тексту елемента, застосовується тільки до блокових елементів;

:before — вставляє вміст, що генерується перед елементом;

:after — додає вміст, що генерується після елемента.

3. Комбінація селекторів

Для більш точного відбору елементів форматування можна використовувати комбінації селекторів:

img:nth-of-type(even) — вибере усі парні зображення, альтернативний текст яких містить слово css.

4. Угруповання селекторів

Один і той самий стиль можна одночасно застосувати до кількох елементів. Для цього необхідно в лівій частині оголошення перерахувати через кому потрібні селектори:

H1, h2, p, span (color: tomato; background: white; )

5. Спадкування та каскад

Спадкування та каскад — два фундаментальні поняття в CSS, які тісно пов'язані між собою. Спадкування полягає в тому, що елементи успадковують властивості свого батька (елемента, що їх містить). Каскад проявляється у тому, як різні види таблиць стилів застосовуються до документа, і як конфліктуючі правила перевизначають одне одного.

5.1. успадкування

успадкуванняє механізмом, за допомогою якого певні властивості передаються від предка до його нащадків. Специфікацією CSS передбачено успадкування властивостей, що відносяться до текстового вмісту сторінки, таких як color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space і word- spacing. У багатьох випадках це зручно, оскільки не потрібно задавати розмір шрифту та сімейство шрифтів для кожного елемента веб-сторінки.

Властивості, що стосуються форматування блоків, не успадковуються. Це background , border , display , float і clear , height і width , margin , min-max-height і -width , outline , overflow , padding , position , text-decoration , vertical-align і z-index .

Примусове успадкування

За допомогою ключового слова inherit можна змусити елемент успадковувати будь-яке значення якості батьківського елемента. Це працює навіть для тих властивостей, які не успадковуються за умовчанням.

Як задаються та працюють CSS-стилі

1) Стилі можуть успадковуватись від батьківського елемента (успадковані властивості або за допомогою значення inherit);

2) Стилі, розташовані в таблиці стилів нижче, скасовують стилі, розташовані в таблиці вище;

3) До одного елементу можуть застосовуватися стилі із різних джерел. Перевірити, які стилі використовуються, можна в режимі розробника браузера. Для цього над елементом потрібно клацнути правою кнопкою миші та вибрати пункт "Подивитися код" (або щось аналогічне). У правому стовпці будуть перелічені всі властивості, які задані для цього елемента або успадковуються від батьківського елемента, а також файли стилів, в яких вони вказані, та порядковий номер рядка коду.

Мал. 2. Режим розробника у браузері Google Chrome

4) При визначенні стилю можна використовувати будь-яку комбінацію селекторів - селектор елемента, псевдоклас елемента, класу або ідентифікатора елемента.

div (border: 1px solid #eee;) #wrap (width: 500px;) .box (float: left;) .clear (clear: both;)

5.2. Каскад

Каскадування— це механізм, який керує кінцевим результатом у ситуації, коли до одного елемента використовуються різні CSS-правила. Існує три критерії, які визначають порядок застосування властивостей - правило!important, специфічність та порядок, в якому підключені таблиці стилів.

Правило!

Вагу правила можна встановити за допомогою ключового слова!important , яке додається відразу після значення властивості, наприклад, span (font-weight: bold!important;) . Правило необхідно розміщувати в кінці оголошення перед закриває дужкою, без пробілу. Таке оголошення матиме пріоритет над усіма іншими правилами. Це правило дозволяє скасувати значення властивості та встановити нове для елемента із групи елементів у разі, коли немає прямого доступу до файлу зі стилями.

Специфіка

Для кожного правила браузер обчислює специфічність селектора, і якщо елемент має конфліктні оголошення властивостей, до уваги береться правило, що має найбільшу специфічність. Значення специфічності складається із чотирьох частин: 0, 0, 0, 0 . Специфіка селектора визначається наступним чином:

для id додається 0, 1, 0, 0;
для class додається 0, 0, 1, 0;
для кожного елемента та псевдоелемента додається 0, 0, 0, 1;
для вбудованого стилю, доданого безпосередньо до елемента - 1, 0, 0, 0;
Універсальний селектор не має специфічності.

H1 (color: lightblue;) /*специфічність 0, 0, 0, 1*/ em (color: silver;) /*специфічність 0, 0, 0, 1*/ h1 em (color: gold;) /*специфічність: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: blue;) /*специфічність: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: grey;) /*специфічність 0, 0, 1, 0 */ #sidebar (color: orange;) /*специфічність 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*специфічність: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

У результаті елемента застосовуються ті правила, специфічність яких більше. Наприклад, якщо елемент діють дві специфічності зі значеннями 0, 0, 0, 2 і 0, 1, 0, 1 , то виграє друге правило.

Порядок підключених таблиць

Ви можете створити кілька зовнішніх таблиць стилів та підключити їх до однієї веб-сторінки. Якщо в різних таблицях будуть зустрічатися різні значення властивостей одного елемента, то в результаті до елемента застосовується правило, що знаходиться в таблиці стилів, що у списку нижче.

Ну для початку, скажу, що селектор служить для того, щоб однозначно визначити елемент у html документі, до якого ми хочемо застосувати той чи інший стиль CSS.

Селектор за елементом

До цього моменту ми з вами працювали саме з цим селектором. як селектор використовувалося безпосередньо ім'я html елемента, до якого ми хотіли застосувати цей стиль. Тобто. написавши клас наприклад для параграфа(Р), всі параграфи на сторінці набували стиль даного класу.

P{
font-size: 12px
}

А тепер уявіть ситуацію, коли необхідно зробити перший параграф в одному стилі, другий в іншому, третій у третьому тощо. Тут нам на допомогу прийде селектор за класом.

Селектор класу

Давайте розберемо як створити універсальний клас у CSS. А зробити це дуже просто: спочатку ставимо крапку, потім відразу, без пропуску, пишемо ім'я класу, ну а потім у фігурних дужках стиль. Ну наприклад:

.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

Як застосувати цей стиль?

Допустимо ми хочемо застосувати цей стиль до певного параграфа в документі. Ось як це буде виглядати в html:

class = "green" > ... текст параграфа...

Як бачите, використовується атрибут classіз значенням назви стилю. Зрозуміло? ось вам ще приклад:

Це звичайний параграф, для нього використовується селектор за елементом

Class = "green "> Цей параграф зелений, тому що до нього застосували клас

Class = "big_red" > А цей параграф більшого шрифту та червоний

Цей параграф знову звичайний, за класом селектора елемента

p {
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green(color:green;)
.big_red{
font-size:28px;
color:red;
}

Вказуємо спочатку базовий стиль для всіх параграфів (селектор за елементом), а потім вже, якщо хочемо в якомусь параграфі щось змінити, створюємо для нього спеціальний стиль (селектор за класом) і присвоюємо його параграфу. Коли ми створюємо цей спеціальний клас, ми повинні писати туди лише ті властивості, які хочемо додати, або змінити по відношенню до базового стилю для цього елемента.

Класи з прикладу вище, можна застосувати не тільки до параграфа, а й наприклад до заголовків, або наприклад до комірки таблиці, або до всієї таблиці, коротше вони можуть застосовуватися скрізь, де вони можуть щось вплинути (в даному випадку скрізь, де є параметр кольору і текст).

Зробити так, щоб клас діяв тільки на певний елемент (наприклад параграф) можна вказавши назву елемента перед точкою:

P.green(color:green;)

Тепер клас green не діятиме ні на що інше, крім елемента P.

Вгору

Селектор з id

Цей селектор застосовується якщо необхідно виділити один єдиний елемент, унікальний, відмінний від інших у документі. Наприклад, виділимо перший заголовок на сторінці певним чином:

html-частина:

<Н1 id = "firstheader " > Перший заголовок на сторінці

css - частина:

H1#firstheader { color: red; font-weight: bold; text-align: center }

Як бачите в html-частині замість атрибута class тут використовується атрибут id , а css - замість точки використовується знак #.

В принципі, те саме можна зробити і з використанням селектора за класом, це вже кому як більше подобається:)

Вгору

Контекстний селектор

Це дуже корисна річ. Припустимо ми є сторінка з таблицями і параграфами тексту, причому у таблиці, й у параграфах зустрічаються виділені жирним шрифтом(strong) слова. І ось, нам різко знадобилося зробити так, щоб слова, в параграфі, виділені жирним стали зеленого кольору. Так ось.

Селектор - це частина CSS-правила, яка повідомляє браузеру, до якого елементу (або елементам) веб-сторінки буде застосовано стиль.

Термін селектор може відноситися до простого селектора (simple selector), складеного селектора (compound selector), складного селектора (complex selector) або списку селекторів.

До простим селекторамвідносяться:

• селектор типу
• універсальний селектор
• селектори атрибутів
• селектор ідентифікатора
• селектор класу
• псевдо-класи

CSS селектор	приклад	Опис	CSS
.class	.myClass	Вибирає всі елементи класу myClass (class="myClass").	1
#id	#main	Вибирає елемент із ідентифікатором main (id="main").	1
	*	Вибір усіх елементів.	2
елемент	span	Вибір усіх елементів .	1
елемент, елемент	div,span	Вибір усіх елементів та всіх елементів .	1
[атрибут]		Вибирає всі елементи з атрибутом title.	2
[атрибут="значення"]		Вибирає всі елементи з атрибутом title , значення якого точно збігається зі значенням вказаним у селекторі (title="cost)"). !}	2
[атрибут~="значення"]		Вибирає всі елементи з атрибутом title , у значенні якого (у будь-якому місці) зустрічається підрядок (у вигляді окремого слова) "один" (title="один і два)"). !}	2
[атрибут|="значення"]		Вибір всіх елементів з атрибутом lang, значення якого починається з "ru".	2
[атрибут^="значення"]	a	Вибір кожного елемента з атрибутом href, значення якого починається з "https".	3
[атрибут$="значення"]		Вибирає всі елементи з атрибутом src , значення якого закінчується ".png" (src="some_img.png").	3
[атрибут*="значення"]		Вибирає всі елементи з атрибутом title , у значенні якого (у будь-якому місці) зустрічається підрядок (у вигляді окремого слова або його частини) "один" (title="один і два)"). !}	3

Складовий селектор- це послідовність простих селекторів, які розділені комбінаторами, т. е. за одним селектором відразу йде наступний. Він вибирає елемент, який відповідає всім простим селекторам, які він містить. Селектор типу або універсальний селектор, що входить до складового селектора, повинен бути розташований першим у цій послідовності. У складеному селекторі допустимо лише один селектор типу або універсальний селектор.

Span.className p.className1.className2#someId:hover

Складний селектор- Це послідовність селекторів, які розділені комбінаторами.

Список селекторів- це селектори, перераховані через кому.

Комбінатори

Для поєднання простих CSS селекторів використовуються комбінатори, які вказують взаємозв'язок між простими селекторами. Існує кілька різних комбінаторів CSS2, і один додатковий CSS3, коли ви їх використовуєте, вони змінюють характер самого селектора.

Псевдо-класи

Псевдо-клас - це простий селектор, який використовується для вибору того, що не може бути вибрано за допомогою інших селекторів або може бути вибрано, але досить важким способом.

Псевдо-клас	приклад	Опис	CSS
:link	a:link	Вибір усіх невідвіданих посилань.	1
:visited	a:visited	Вибір усіх відвіданих посилань.	1
:active	a:active	Вибір активного посилання.	1
:hover	a:hover	Вибір посилання при наведенні курсору мишки.	1
: Focus	input:focus	Вибір елемента , що знаходиться у фокусі.	2
:first-child	p:first-child	Вибір кожного елемента Який є першим дочірнім елементом свого батька.	2
:lang(мова)	p:lang(ru)	Вибір кожного елемента З атрибутом lang значення якого починається з "ru".	2
:first-of-type	p:first-of-type	Вибір кожного елемента Який є першим із елементів	3
:last-of-type	p:last-of-type	Вибір кожного елемента Який останній з елементів Свого батьківського елемента.	3
:only-of-type	p:only-of-type	Вибір кожного елемента Який є єдиним елементом Свого батьківського елемента.	3
:only-child	p:only-child	Вибір кожного елемента Який єдиний дочірнім елементом свого батьківського елемента.	3
:nth-child(n)	p:nth-child(2)	Вибір кожного елемента Свого батьківського елемента.	3
:nth-last-child(n)	p:nth-last-child(2)	Вибір кожного елемента Який другий дочірній елемент свого батьківського елемента, вважаючи від останнього дочірнього елемента.	3
:nth-of-type(n)	p:nth-of-type(2)	Вибір кожного елемента Який є другим дочірнім елементом Свого батьківського елемента.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Вибір кожного елемента Який є другим дочірнім елементом Свого батьківського елемента, рахуючи від останнього дочірнього елемента.	3
	3
:not(селектор)	:not(p)	Вибір усіх елементів, окрім елемента .	3

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

Псевдо-елемент – це віртуальний елемент, який немає у явному вигляді у дереві елементів документа. Псевдоелементи використовуються для вибору тих частин елемента, які не можуть бути обрані за допомогою інших селекторів, а також для стилізації не всього елемента, а окремих його частин.

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

Селектор CSS за тегом та класом

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

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

Особливості селекторів щодо ідентифікатора

Селектори по id або ідентифікатору більш специфічні, ніж за класом і атрибутом. Тобто при використанні в каскаді вони «переважуватимуть» інші подібні селектори. Ідентифікатори також допомагають точно вибрати певний елемент у коді, але їх використання при оформленні сторінок вважається поганою практикою серед верстальників. Тільки в дуже рідкісних випадках, наприклад при створенні слайдера CSS, така практика допустима. Справа в тому, що в межах однієї сторінки може бути лише один елемент із певним id. Отже, через унікальність селектора CSS по ID він може використовуватися тільки для одного-єдиного елемента. І тут набагато логічніше використовувати класи, а чи не ідентифікатори.

Різні думки про селектор з id

Але існує й протилежна думка, що ідентифікатор допомагає визначити той фрагмент коду на сторінці, який має бути в єдиному екземплярі. При цьому, хоча селектори за класами можуть замінити його, вони повинні використовуватися для великих груп елементів, а в місцях, де потрібна точність, краще використовувати id. Кожен верстальник має право виробити свою особисту думку з цього питання та писати код у своїй власній стилістиці. При написанні селектора id перед ним використовується символ «#». Тобто рядок коду виглядатиме так: #blue: (color: blue). При такому записі буде забарвлений синій колір елемент з ідентифікатором «#blue».

Використання каскаду

При використанні HTML селекторів CSS по id можна також використовувати властивість каскадності. Наприклад, якщо всередині тега з ідентифікатором потрібно вибрати якийсь дочірній тег та змінити його властивості, спочатку потрібно записати ім'я ідентифікатора з ґратами, потім дочірній тег та його властивості. Такі селектори називаються вкладеними. Тобто рядок коду виглядатиме приблизно так: #id p (color: blue). Тоді всередині батьківського елемента із цим ідентифікатором у дочірнього абзацу колір тексту зміниться на синій.

Використання селекторів дочірніх елементів

Ще один варіант використання каскаду для зміни властивостей дочірніх елементів використовується, якщо потрібно вибрати певну частину коду. Його також називають селектором нащадків. Наприклад, щоб вибрати абзац усередині якогось рядка таблиці, використовується наступний запис CSS селектора: ul li > p: (color: blue). Варто звернути увагу на те, що чим довше запис, тим вища ймовірність, що вдасться змінити якусь конкретну властивість елемента, оскільки він стає більш пріоритетним для каскаду. Наприклад, елементи з якоюсь іншою властивістю CSS-селектора класу, який є батьківським, не змінить свої властивості повністю. Перефарбується лише певна частина тексту у списку.

Селектор сестринських елементів

Ще один цікавий спосіб використання каскадності – сусідні селектори CSS. Записуються вони як сума селекторів: "span + a (color blue)". При цьому сусідом вважається той, під яким є ще один, який підходить під потрібні параметри. Таким чином, якщо в коді є три елементи, то до першого з них властивість не застосовується, тому що у нього немає сусіднього, а до всіх наступних – так. Так відбувається через значок суми, коли складаються наступні селектори, а чи не попередні. Такий запис допомагає скоротити код і не записувати кілька CSS-селекторів для різних тегів, застосовуючи однакові властивості. Якщо другому елементу списку задати додатково ще й клас, а запис змінити на ". class + a (color blue)", тоді відлік піде від нього і властивості зміняться у наступних придатних під правило елементів, а два перших залишаться колишніми.

Тепер припустимо, що в нашому коді є три однакові теги з різними класами і потрібно вибрати всі елементи після певного. У цьому випадку не допоможе застосування тільки селекторів тегів CSS. Для цього використовується селектор такого виду: ". class ~ div". При цьому вибираються елементи з div тегом, які йдуть після заданого класу. Якщо ми хочемо вибрати не тільки елементи з div тегом, але і всі наступні, замість тега після знака тильди потрібно поставити символ зірочки - «*». Такий запис означатиме, що потрібно вибрати все, що слідує після заданого класу. Можна вибрати взагалі всі елементи на сторінці, якщо залишити як селектор тільки зірочку.

Селектори за CSS-атрибутом

Припустимо, що в нашому коді присутні елементи з якимись атрибутами, але всі вони відрізняються один від одного і написані через дефіс, а нам потрібно вибрати всі ті, у яких назва класу починається з певного слова, наприклад selector, і класи розділені знаком "-". Що потрібно робити у цьому випадку? Запис селектора починається з квадратних дужок, куди спочатку записується назва атрибута, потім вертикальний сліш, знак = і selector: data- | = selector. Далі пишемо потрібну властивість, яку хочеться змінити. В результаті вибереться елемент із заданими параметрами. Змінюючи класи, можна змінювати властивості певних частин коду. Якщо ж імена класів записані не через дефіс, а одним словом, тоді їх також можна вибрати, але використовуючи трохи інший запис. У цьому випадку вертикальний сліш замінюється символом "^": "data^ = selector". Такий селектор вибирає підрядок із початком назви класу.

Як вибрати елемент із певним закінченням у назві класу

Тепер надійдемо інакше і виберемо частини коду не на початку опису класу, а за останніми літерами в його назві. Для цього нам знадобиться піктограма долара. Ставимо його місце галочки, а після знака рівності пишемо закінчення назви класу: «data$ = ctor». Тепер елементи з цим поєднанням літер будуть обрані та до них застосовані певні властивості. Вибирати можна будь-який атрибут. Розберемо, як вчинити, якщо нам потрібно знайти елемент із якимось буквосполученням у середині слова. В цьому випадку змінюємо знак долара на зірочку, а після знаку рівності пишемо потрібні букви: data* = ct.

Псевдокласи - спеціальні селектори

Для посилань зазвичай використовуються спеціальні селектори стилів CSS, які відображають різні їх стани: спокійний, у фокусі, активний, пройдений – вони називаються псевдокласами. Псевдоклас для активної посилання, яку наведено курсор, пишеться так: «а:active». Далі йдуть якісь властивості, найчастіше змінюється тло або додається тінь. Якщо додати цю властивість для посилання і натиснути на неї, вона змінити свій колір на заданий. Ще один псевдоклас – hover показує, що посилання вже пройдено. Записується так: «a:hover».

Особливості станів active та focus

Active часто плутають із іншим станом – focus. Записується воно так: a:focus і позначає активний стан кнопки при роботі з клавіатури. Тобто, якщо використовувати клавішу TAB, активне посилання виділятиметься особливим кольором. Цю властивість обов'язково потрібно використовувати, тому що користуватися мишею для навігації сайтом можуть не всі користувачі. У деяких може бути слабкий зір або інші обмеження здоров'я, тому вони переміщуються по сторінці за допомогою клавіш або спеціальних пристроїв. Ігнорування стану кнопки у фокусі є великим мінусом для такого параметра в дизайні сайту, як доступність, і значно впливає на його відвідуваність особливою категорією користувачів. При звичайній навігації за допомогою мишки посилання стає одночасно активним і у фокусі. Тому, при стилізації елементів важливо звертати увагу на це.

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

Псевдоелементи дозволяють задавати спеціальні стилі без його визначення в структурі HTML. Записуються так: ім'я селектора, знак «::», ім'я псевдоелемента. Найбільш поширені елементи «before» та «after». Вони мають властивість «content», вони можуть застосовуватися до внутрішнім стилям. After потрібен для додавання якогось контенту після вмісту певного елемента. Що саме потрібно вставити, записується як «content». Аналогічним чином, псевдоелемент before додає контент перед вмістом елемента. Використання цих спеціальних селекторів дозволяє скоротити код і не писати щоразу нову структуру для якоїсь його частини, якщо потрібно додати невелику деталь у певне місце контейнера. Вони дуже часто використовуються при стилізації сторінок та додаванні якихось декоративних елементів. Комбінації всіх цих варіантів допомагають створювати незвичайні ефекти на сторінці та дуже допомагають роботі верстальника.

Селектор служить у тому, щоб однозначно визначити елемент у html документі, якого ми хочемо застосувати той чи інший стиль CSS .

• Селектор за елементом;
• Селектор за класом;
• Селектор з id;
• Контекстний селектор;

Селектор за елементом

До цього моменту ми з вами працювали саме з цим селектором. як селектор використовувалося безпосередньо ім'я html елемента, до якого ми хотіли застосувати цей стиль. Тобто. написавши клас наприклад для параграфа(Р), всі параграфи на сторінці набували стиль даного класу.

P (
font-size: 12px
}

А тепер уявіть ситуацію, коли необхідно зробити перший параграф в одному стилі, другий в іншому, третій у третьому тощо. Тут нам на допомогу прийде селектор за класом.

Селектор класу

Давайте розберемо як створити універсальний клас у CSS. А зробити це дуже просто: спочатку ставимо крапку, потім одразу, без пробілу, пишемо ім'я класу, а потім у фігурних дужках стиль. Наприклад:

.green (
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

Як застосувати цей стиль?

Допустимо ми хочемо застосувати цей стиль до певного параграфа в документі. Ось як це буде виглядати в html:

Текст параграфа...

Як бачите, використовується атрибут classіз значенням назви стилю.

ПРИКЛАД:

Це звичайний параграф, для нього використовується селектор за елементом

Цей параграф зелений, тому що до нього застосували клас

А цей параграф більшого шрифту та червоний

Цей параграф знову звичайний, за класом селектора елемента

p (
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green (color:green;)
.big_red(
font-size:28px;
color:red;
}

Вказуємо спочатку базовий стиль для всіх параграфів (селектор за елементом), а потім вже, якщо хочемо в якомусь параграфі щось змінити, створюємо для нього спеціальний стиль (селектор за класом) і присвоюємо його параграфу. Коли ми створюємо цей спеціальний клас, ми повинні писати туди лише ті властивості, які хочемо додати, або змінити по відношенню до базового стилю для цього елемента.

Класи з прикладу вище, можна застосувати як до параграфу, а й, наприклад, до заголовків, чи, наприклад, до осередку таблиці, чи до всієї таблиці, коротше вони можуть застосовуватися скрізь, де вони можуть щось вплинути (у цьому у разі скрізь, де є параметр колір, і текст).

Зробити так, щоб клас діяв тільки на певний елемент (наприклад параграф) можна вказавши назву елемента перед точкою:

P.green (color:green;)

Тепер клас green не діятиме ні на що інше, крім елемента P.

Селектор з id

Цей селектор застосовується, якщо необхідно виділити один єдиний елемент, унікальний, відмінний від решти в документі. Наприклад, виділимо перший заголовок на сторінці певним чином:

html-частина:

<Н1 id="firstheader">Перший заголовок на сторінці

css - частина:

H1#firstheader ( color: red; font-weight: bold; text-align: center )

Як бачите в html-частині замість атрибута class тут використовується атрибут id , а css - замість точки використовується знак #.

В принципі, те саме можна зробити і з використанням селектора за класом J

Контекстний селектор

Це дуже корисна річ. Припустимо, ми маємо сторінку з таблицями і параграфами тексту, причому у таблиці, й у параграфах зустрічаються виділені жирним шрифтом(strong) слова. Необхідно зробити так, щоб слова в параграфі, виділені жирним, стали зеленого кольору. Так ось:

p strong (color:green)

Тобто. на початку Pпотім пробіл, потім STRONG,а вже потім стиль. Читається цей рядок приблизно так: Якщо всередині елемента Pє елемент STRONGто елементу strong присвоїти стиль зеленого кольору.

Вкладеність може бути будь-якого рівня. Ось ще приклад: «Якщо раптом усередині комірки таблиці ( td) , зустрінеться параграф ( P) ,всередині якого буде виділене слово жирним ( STRONG), то нехай це слово стане червоним! «

td p strong (color:red;)