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

Влад Мержевич

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

Таким чином, можна одночасно встановити стиль для окремого тега, а також для тега, який знаходиться всередині іншого.

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 , то виграє друге правило.

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

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

Цей матеріал присвячений основам оформлення стилів на інтернет-ресурсі за допомогою селекторів.

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

Види селекторів у CSS

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

Для надання необхідного CSS-стилю в даному випадкуяк селектор записується назва html елемента. Наприклад, достатньо прописати потрібний стильдля заголовка H1, після чого дані заголовки набудуть необхідного нам вигляду. Ось таким буде код:

H1 (
font-size: 11pt;
}

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

Селектор класів

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

.red (
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}

Приклад використання селектора за класом. Застосуємо цей стиль до заголовка H1 в html сторінці:

заголовок сторінки

З прикладу вище видно, що застосовується атрибут "class" із заданою назвою CSS стилю "red".
Інший приклад. У html частині пишемо:

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

id".

У html документі це виглядатиме так:

Задамо стиль для даного параграфа

У документі CSS:

p#newstyle (color: blue; font-size: 12px;)

В результаті, для цього параграфа буде застосовано шрифт синього кольору та розміром 12px.

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

Не менш потрібним компонентом є контекстний селектор.
Наприклад, на сайті виникла потреба заголовки "H1", укладені тегом boldвиділити червоним кольором:

H1 bold (color:red;)

Як бачимо, насамперед пишеться заголовок H1, ставиться пробіл, тег boldа потім у дужках заданий нами стиль. Виразити словами це можна так: "За наявності всередині заголовка H1 тега bold текст має бути червоного кольору".

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

Наступна сторінка -

Що таке селектор у css- це опис того елемента або групи елементів, який показує браузеру який елемент вибрати для застосування до нього стилю. Давайте розглянемо основні CSS селектори.

1) .Х

.topic-title (background-color: yellow; )

CSS селектор класу Х. Різниця між id і класом у тому, що той самий клас може бути в декількох елементів на сторінці, а id завжди унікальний. Класи варто використовувати для застосування того самого стилю до кількох елементів.

• Chrome
• Firefox
• Safari
• Opera

2) #X

#content (width: 960px; margin: 0 auto; )

CSS селектор з id. Знак ґрат перед CSS селектором Х вибирає елемент у якого id = Х. Навішуючи стилі по id завжди варто пам'ятати, що він повинен бути унікальним – тільки один такий id повинен бути на сторінці. Тому краще використовувати селектори за класами, комбінаціями класів або назви тегів. Тим не менш, селектори по ID добре застосовуються в автоматизованому тестуванні, т.к. дозволяють відразу взаємодіяти саме з потрібним елементом і мати впевненість, що він тільки один такий на сторінці.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

3) *

* ( margin: 0; padding: 0; )

CSS селектор всіх елементів. Символ зірочки вибирає всі елементи, які є на сторінці. Багато розробників використовують його для того, щоб усунути (обнулити) значення відступів (margin і padding) у всіх елементів сторінки. Тим не менш, на практиці краще так не робити, тому що цей CSS селектор досить сильно вантажить браузер перебором всіх елементів на сторінці.

Символ * також можна використовувати, щоб виділити всі дочірні елементи:

#header * ( border: 5px solid grey; )

У цьому прикладі виділяються всі дочірні елементи (нащадки) елемента #header . Але завжди варто пам'ятати, що цей селектор є досить важким для браузера.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

4) X

a ( color: green; ) ol ( margin-left: 15px; )

CSS селектор типу. Як вибрати всі елементи одного типу, якщо вони не мають ні id ні класів? Варто використовувати селектор CSS за типом елемента. Наприклад, щоб вибрати всі впорядковані списки на сторінці, використовуйте ol (...) як показано вище.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

5) Х Y

li a ( font-weight: bold; text-decoration: none; )

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

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

6) Х+Y

div + p ( font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; )

Сумісний селектор елементівобирає тількиелемент типу Y, який йде відразу після елемента Х. У цьому випадку кожен параграф наступний відразу після кожного елемента div отримуватиме спеціальний тип і розмір шрифту.

Якими браузерами підтримується:
• IE7 +
• Firefox
• Chrome
• Safari
• Chrome

7) Х > Y

#content > ul ( border: 1px solid green; )

CSS селектор нащадків. Різниця між селекторами Х Y і X > Y в тому, що селектор, що розглядається, буде вибирати тільки безпосередні дочірні елементи (вибере тільки прямих нащадків). Наприклад:

• Елемент списку
  • Нащадок першого елемента списку
• Елемент списку
• Елемент списку

CSS селектор #content > ul вибере тільки ul, який є прямим нащадком блоку div з id = "container". Він не вибере ul, який є нащадком першого li. Це досить вигідний за швидкістю роботи CSS селектор.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

8) Х ~ Y

ol ~ p ( margin-left: 10px; )

Селектор сестринських (шаблінгових) елементівменш суворий ніж X + Y. Він вибере як перший, а й інші елементи p, які йдуть за ol.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

a:link ( color: green; ) a:visited ( color: grey; )

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

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

10) X

a ( color: red; )

CSS селектор за атрибутом. У цьому прикладі вибираються ті посилання, які мають атрибут title.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

11) X

a ( color: yellow; )

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

12) X

a ( color: #dfc11f; )

Зірочка означає, що значення має бути де-небудь в атрибуті (у будь-якій частині атрибуту href). Таким чином, будуть вибрані і посилання з https://www..stijit.. До всіх вибраних посилань буде застосований золотий колір.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

13) X

a ( background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; )

На деяких сайтах поруч із посиланнями, що ведуть на інші сайти, проставлені невеликі іконки зі стрілками, щоб показати, що це зовнішні посилання. Карат “^” – це символ для позначення початку рядка. Таким чином, для вибору всіх тегів, у яких href починається з http, потрібно використовувати CSS селектор з каратом, як це показано на прикладі вище.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

14) X

a (color: green; )

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

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

15) X

a (color: green; )

Тут ми застосовуємо CSS селектор за атрибутом користувача. Додаємо наш власний атрибут data-filetype у кожну посилання:

посилання

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

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

16) X

Тільда ​​(~) дозволяє виділити певний атрибут зі списку атрибутів, розділених пробілом. Можна прописати власний атрибут data-info, в якому вказувати кілька ключових слів через пробіл. Таким чином, можна вказати, що посилання є зовнішнім і веде на зображення.

посилання

За допомогою такого прийому ми можемо вибирати елементи з потрібними комбінаціями атрибутів:

/* Вибрати елемент, атрибут data-info якого містить значення external */ a ( color: green; ) /* Вибрати елемент, атрибут data-info якого містить значення image */ a ( border: 2px dashed black; )

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

17) X:checked

input:checked ( border: 3px outset black; )

Цей псевдоклас виділяє лише такі елементи, як checkbox або radio button, причому тільки коли вони вже у зазначеному стані.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

18) X: after

Псевдокласи: before та: after дуже корисні – вони створюють контент до і після вибраного елемента.

Clearfix:after ( content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Тут за допомогою псевдо-класу: після блоку з класом. clearfix створюється порожній рядок, після чого очищається. Цей підхід використовується, якщо неможливо застосувати властивість overflow: hidden .

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

19) X:hover

div:hover ( background-color: rgba(11,77,130,0.5); )

Застосовує до елемента певний стиль, коли він наводиться курсор миші. Старі версії Internet Explorer застосовують:hover тільки до посилань.

A:hover ( border-bottom: 1px dotted blue; )

Якими браузерами підтримується:
• IE6+ (В IE6 застосовується тільки до посилань)
• Chrome
• Firefox
• Safari
• Opera

20) X: not (selector)

div:not(#content) ( color: grey; )

Псевдоклас not (заперечення)буває корисний коли, наприклад, потрібно вибрати все div, крім того, що має id="content" .

За таким же принципом можна вибрати всі елементи, крім p:

*:not(p) ( color: blue; )

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

21) X::pseudoElement

p::first-line ( font-weight: bold; font-size: 24px; )

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

Вибір першої літери параграфа:

P::first-letter ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Вибір першого рядка у параграфі:

P:first-line ( font-size: 28px; font-weight: bold; )

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera

22) X: first-child

ul li:first-child ( border-top: none; )

Псевдоклас first-childвибирає лише першого нащадка батьківського елемента. Часто використовується, щоб прибрати border в першому елементі списку. Цей псевдоклас був ще з CSS 1.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari
• Opera 3.5+
• Android

23) X:last-child

ul > li:last-child ( border-bottom: none; )

Псевдоклас last-childвибирає останнього нащадка батьківського елемента Він з'явився тільки з CSS 3.

Якими браузерами підтримується:
• IE9+ (IE8 підтримує first-child, але не last-child. Microsoft (с))
• Chrome
• Firefox
• Safari
• Opera 9.6+
• Android

24) X: only-child

div p:only-child ( color: green; )

Псевдоклас only-childдозволяє вибрати ті елементи, які є єдиними нащадками своїх батьків.

Якими браузерами підтримується:
• Chrome
• Firefox
• Safari 3.0+
• Opera 9.6+
• Android

25) X: nth-child (n)

li:nth-child(3) ( color: black; )

Вибирає дочірній елемент за номером, вказаним у параметрі. Селектор nth-childприймає ціле число як параметр, проте відлік ведеться з 1, тобто. Якщо потрібно вибрати другий пункт списку, використовуйте li:nth-child(2) . Усі псевдокласи з використанням nth-child з'явилися тільки з CSS 3.

Якими браузерами підтримується:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

26) X:nth-last-child(n)

li:nth-last-child(2) ( color: red; )

Якщо у вас є великий список елементів в ul і потрібно вибрати третій елемент з кінця? Замість того, щоб писати li:nth-child(109) можна використовувати селектор останніх нащадків nth-last-child. Цей метод такий самий, як і попередній, але відлік ведеться з кінця.

Якими браузерами підтримується:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

27) X:nth-of-type(n)

ul:nth-of-type(3) ( border: 1px dotted black; )

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

Якими браузерами підтримується:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

28) X:nth-last-of-type(n)

ul:nth-last-of-type(3) ( border: 2px ridge blue; )

Псевдоклас nth-last-of-type(n)призначений вибору n-ого елемента певного типу з кінця.

Якими браузерами підтримується:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

29) X:only-of-type

li:only-of-type ( font-weight: bold; )

Псевдоклас only-of-typeвибирає елементи, які мають сусідів у межах батьківського елемента. Наприклад, можна вибирати всі ul, які містять тільки самотні li.

Якими браузерами підтримується:
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3) ( font-style: italic; )

Псевдоклас first-of-typeвибирає перший елемент заданого типу

Якими браузерами підтримується:
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.5+
• Android 2.1+
• iOS 2.0+

Каскадні таблиці стилі CSS (Cascading Style Sheets) – стандарт стилів, оголошений консорціумом W3C. Термін каскаднівказує на можливість злиття різних видів стилів та на спадкування стилів внутрішніми тегами від зовнішніх.

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

CSS – абстракція, у якій зовнішній вигляд Web-документа визначається окремо від змісту.

Деякі стилі підтримуються не всіма браузерами. Однак можна призначати будь-які стилі, тому що стилі, що не підтримуються, будуть просто ігноруватися.

Можливо, Вам знадобляться також:

За методами додавання стилів документ розрізняють три види стилів.

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

Внутрішні стилі визначаються атрибутом styleконкретні теги. Внутрішній стиль діє тільки на певні теги елементи. Цей метод мало відрізняється від традиційного HTML.

приклад

Абзац з текстом синього кольору

РЕЗУЛЬТАТ:

Абзац з текстом синього кольору

Абзац з червоний колір тексту

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

Глобальні стилі

Глобальні стилі CSS розміщуються в контейнері , розташованому у свою чергу у контейнері ... .

Атрибут type="text/css"раніше обов'язковий для тега .........

Сірий колір тексту у всіх абзацах Web-сторінки

РЕЗУЛЬТАТ:

Сірий колір тексту у всіх абзацах Web-сторінки

Сірий колір тексту у всіх абзацах Web-сторінки

Зовнішні (пов'язані) стилі

Зовнішні (пов'язані) стилі визначаються в окремому файлі з розширенням css. Зовнішні стилі дозволяють всім сторінкам сайту виглядати однаково.

Для зв'язку з файлом, у якому описані стилі, використовується тег , розташований у контейнері ... .

У цьому тезі повинні бути задані два атрибути: rel="stylesheet"і href, що визначає адресу файлу стилів.

приклад

......... ......... .........

Підключення стилів

Правило підключення глобальних та зовнішніх стилів складається з селектораі оголошень стилю.

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

P ( text-indent: 30px; font-size: 14px; color: #666; )

Оголошення стилю – це пара властивість CSS: значення CSS.

Наприклад: color: red

При внутрішньому підключенні стилю правило CSS, яке є значенням атрибуту style, складається з оголошень стилю, розділених крапкою з комою. Наприклад:

Селектори CSS

Селектор	Опис	Докладніше
*	Будь-який елемент
E	Елемент, визначений тегом E
E#myid	Елемент E з ідентифікатором myid
E.myclass	Елемент E класу "myclass"
E	Селектор існування атрибуту
E	Селектор рівності атрибуту
E	Селектор атрибута зі списком значень	Селектори атрибутів
E	Селектор атрибуту префікса
E	Селектор суфіксу атрибуту
E	Селектор підстроювання атрибуту
E:link	Елемент E – ще не відвідане користувачем посилання	Динамічні псевдокласи
E:visited	Елемент E – вже відвідане користувачем посилання	Динамічні псевдокласи
E:hover	Елемент E при наведенні на нього покажчика мишки	Динамічні псевдокласи
E:active	Елемент E, активований користувачем	Динамічні псевдокласи
E:focus	Елемент E у фокусі	Динамічні псевдокласи
E:target	Елемент E, який є метою посилання	Цільовий псевдоклас
E:lang	Елемент E, написаний вказаною мовою	Псевдоклас мови
E:enabled	Елемент E – доступний елемент форми	Псевдокласи станів
E:disabled	Елемент E – недоступний елемент форми	Псевдокласи станів
E:checked	Елемент E – увімкнений прапорець або перемикач	Псевдокласи станів
E:indeterminate	Елемент E – невизначений прапорець або перемикач	Псевдокласи станів
E:root	Елемент E, корінь документа	Структурні псевдокласи
E:nth-child(n)	Елемент E, n-й дитина батьківського елемента	Структурні псевдокласи
E:nth-last-child(n)	Елемент E, n-й дитина батьківського елемента, рахуючи з кінця	Структурні псевдокласи
E:nth-of-type(n)	n-й елемент типу E	Структурні псевдокласи
E:nth-last-of-type(n)	n-й елемент типу E, рахуючи з кінця	Структурні псевдокласи
E:first-child	Елемент E, перший дочірній елемент батька	Структурні псевдокласи
E:last-child	Елемент E, останній дочірній елемент батька	Структурні псевдокласи
E:first-of-type	Перший елемент типу E	Структурні псевдокласи
E:last-of-type	Останній елемент типу E	Структурні псевдокласи
E:only-child	Єдиний у батька дочірній елемент	Структурні псевдокласи
E:only-of-type	Єдиний у батька елемент типу E	Структурні псевдокласи
E:empty	Елемент E, який не містить дочірніх елементів	Структурні псевдокласи
E:not(X)	Елемент E, який відповідає простому селектору X	Псевдоклас заперечення
E::first-line	Перший рядок елемента E	Псевдоелементи
E::first-letter	Перша буква елемента E	Псевдоелементи
E::before	Вміст до елемента E	Псевдоелементи
E::after	Вміст після елемента E	Псевдоелементи
E::selection	Виділення елемента E	Псевдоелементи
E F	Елемент F, що знаходиться всередині елемента E
E > F	Елемент F, що знаходиться безпосередньо всередині елемента E
E+F	Елемент F, який слідує відразу після елемента E
E ~ F	Елемент F, який слідує після елемента E

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

Універсальний селектор відповідає будь-якому елементу HTML-документа.

Для позначення універсального селектора використовується символ "зірочка" (*).

Його використовують, якщо необхідно встановити однаковий стиль для всіх елементів Web-сторінки. Наприклад:

* ( margin: 0; padding: 0; )

У деяких випадках символ "зірочка" (*) може бути опущений:
*.myclassі .myclassеквіваленти,
*#myidі #myidеквівалентні

Селектори тегів

Як селектор може виступати будь-який HTML-тег, для якого визначаються правила стильового оформлення. Наприклад:

H1 (color: red; text-align: center;)

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

H1, h2, h3, h4 (color: red; text-align: center;)

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

HTML надає можливість присвоїти унікальний ідентифікатор будь-якому тегу. Ідентифікатор задається атрибутом id. Наприклад:

...

Значення ідентифікатора має починатися з латинської літери та може містити літери (,), цифри (), "дефіси" (-) та "підкреслення" (_).

Значення всіх атрибутів idв html-документі мають бути унікальними. Якщо зустрічаються idз однаковими значеннями, ці ідентифікатори ігноруються, а код Web-сторінки стає невалідним.

У CSS-коді селектор ідентифікатора позначається знаком "грати" (#). Оскільки ідентифікатор idзастосовується тільки до унікальних елементів, назва тега перед знаком "решітка" (#) зазвичай опускають:

Div#a1 (color: green;)

аналогічно

#a1 (color: green;)

Бажано використати idне для стильового оформлення елемента, а для звернення до нього через скрипти або переходу за посиланням.

Селектори класів

Для стильового оформлення найчастіше використовуються селектори класів. Клас для тега задається атрибутом class. Наприклад:

...

Ім'я класу повинне починатися з латинської літери і може містити літери (,), цифри (), "дефіси" (-) та "підкреслення" (_).

Якщо атрибут idзастосовується для унікальної ідентифікації, то за допомогою атрибуту classтег відносять до тієї чи іншої групи.

У CSS-коді селектор ідентифікатора позначається знаком "точка" (.). Різні теги можна зарахувати до одного класу. У такому разі ім'я тега перед знаком "точка" (.) опускають:

I.green (color: #008000;) b.red (color: #f00;) .blue (color: #00f;)

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

...

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

Селектори атрибутів

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

h1 (color: #800000;) /* елемент h1, який має атрибут title */
input ( border: 1px solid #ссс; padding: 4px 6px; width: 300px; )
a ( text-decoration: none; border-bottom: 1px solid #06c; color: #06c; )
span ( display: inline-block; background-image: url("/img/icon_sprite.png"); )
a, a ( background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; )
( display: block; float: left; width: 280px; )

Між іменем тега та квадратною дужкою ([) не повинно бути пробілу!

Універсальний селектор, селектори тегів, ідентифікаторів, класів та атрибутів, а також псевдокласи належать до простих селекторів.

Прості селектори можна пов'язати у певні послідовності з урахуванням відносин елементів у дереві Web-документа. Такі конструкції називаються комбінаторами.

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

Один із найчастіше використовуваних комбіраторів – контекстний селектор.

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

приклад

1. Пушкін А.С.
   • «Постріл»
   • «Завірюха»
   • «Дубровський»
2. Гоголь Н.В.
   • «Ревізор»
   • "Тарас Бульба"
   • "Мертві душі"
3. Толстой Л.М.
   • "Війна і мир"
   • "Анна Кареніна"
   • «Воскресіння»

РЕЗУЛЬТАТ:

1. Пушкін А.С.
   • «Постріл»
   • «Завірюха»
   • «Дубровський»
2. Гоголь Н.В.
   • «Ревізор»
   • "Тарас Бульба"
   • "Мертві душі"
3. Толстой Л.М.
   • "Війна і мир"
   • "Анна Кареніна"
   • «Воскресіння»

Дочірні селектори

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

приклад

1. Пушкін А.С.
   • «Постріл»
   • «Завірюха»
   • «Дубровський»
2. Гоголь Н.В.
   • «Ревізор»
   • "Тарас Бульба"
   • "Мертві душі"
3. Толстой Л.М.
   • "Війна і мир"
   • "Анна Кареніна"
   • «Воскресіння»

РЕЗУЛЬТАТ:

1. Пушкін А.С.
   • «Постріл»
   • «Завірюха»
   • «Дубровський»
2. Гоголь Н.В.
   • «Ревізор»
   • "Тарас Бульба"
   • "Мертві душі"
3. Толстой Л.М.
   • "Війна і мир"
   • "Анна Кареніна"
   • «Воскресіння»

Сусідні селектори

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

приклад

РЕФЛЕКСОТЕРАПІЯ

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПІЯ

Суміжні селектори

Суміжний селектор визначає знак "тильда" (~), що розділяє дві послідовності простих селекторів. Елементи, представлені цими послідовностями, знаходяться всередині одного контейнера і йдуть другий за першим (необов'язково безпосередньо).

приклад

---

РЕФЛЕКСОТЕРАПІЯ

"Всі акти свідомого та несвідомого життя за способом походження суть рефлекси". І.М. Сєченов

---

Рефлексотерапія – лікування захворювань через керування рефлексами. Успішно застосовується у програмах комплексного лікування чи як індивідуальна методика.

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПІЯ

"Всі акти свідомого та несвідомого життя за способом походження суть рефлекси". І.М. Сєченов

Рефлексотерапія – лікування захворювань через керування рефлексами. Успішно застосовується у програмах комплексного лікування чи як індивідуальна методика.