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

1) .Х

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

• Chrome
• Firefox
• Safari
• Opera

2) #X

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

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

3) *

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

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

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

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

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

4) X

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

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

5) Х Y

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

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

6) Х+Y

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

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

7) Х > Y

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

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

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

8) Х ~ Y

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

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

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

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

10) X

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

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

11) X

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

12) X

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

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

13) X

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

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

14) X

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

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

15) X

Тут ми застосовуємо 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

Цей псевдоклас виділяє лише такі елементи, як 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

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

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

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

20) X: not (selector)

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

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

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

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

21) X::pseudoElement

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

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

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

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

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

23) X:last-child

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

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

24) X: only-child

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

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

25) X: nth-child (n)

Вибирає дочірній елементза номером, вказаним у параметрі. Селектор 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)

Якщо у вас є великий список елементів в 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)

Якщо на сторінці є чотири неупорядковані списки і потрібно застосувати стиль лише до третього з них, який не має унікального 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)

Псевдоклас 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

Псевдоклас 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

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

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

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

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

Так, саме завдяки селекторам браузер розуміє які саме елементи коду сторінки потрібно застосовувати конкретні стилі оформлення.

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

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

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

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

Прості селектори

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

  * (якийсь стиль;)

• Селектор типу – вибирає всі теги, які відповідають певному типу. Задається назвою тега. Використовується для завдання загальних правилоформлення документа, наприклад, поставити різні шрифти заголовкам та простому тексту документа.

  h1 (якийсь стиль; )

• - Застосує правило ЦС до всіх тегів з конкретною назвоюкласу. Задається точкою з написаною відразу після неї назвою класу. Мабуть селектор, що найчастіше зустрічається у верстці. Зазвичай використовується, щоб задавати різні стилі оформлення тегам однаковим за типом, але різним за функціональним призначенням.

  LeftColumn (якийсь стиль; )

• Селектор ідентифікатора – використовується для оформлення унікальних елементів на сторінці. Задається гратами, після яких йде назва id. Використовується, якщо потрібно оформити конкретний елемент сторінки.

  #alertButton (якийсь стиль; )

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

  [ type] ( якийсь стиль; ) [ type= "submit" ] ( якийсь стиль; ) input[ type= "submit" ] ( якийсь стиль; )

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

• Селектор нащадка – вибір нащадків (тегів що усередині іншого тега) елементів. Задається через пробіл (батько - пробіл - нащадок).

  div p (якийсь стиль; )

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

  Sidebar> ul (якийсь стиль; )

• Селектор сестринського елемента - вибирає тег, що йде відразу після іншого тега (не укладений всередину, а той, що йде далі). Задається плюсом (перший елемент – плюс – сестринський елемент). Насправді використовується рідко. Обов'язковою умовою застосування є наявність спільного з батьків всім елементів об'єднаним знаком «+».

  h1+ p (якийсь стиль; )

Псевдокласи та псевдоелементи

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

• Пам'ятайте, що на відміну від html у CSS регістр літер має значення. Тобто клас.active і.Active це не те саме! Вони застосовуються до різних елементів, якщо такі є у документі.
• Називайте селектори для оформлення так, щоб потім не заплутатися в них: .leftColumn – гарна назва, .left - залежить від ситуації, але вже не дуже, .llll - фігня якась, ти сам скажеш не дивлячись на код звідки цей клас взявся?
• Ще раз нагадую - якщо елемент на сторінці один, такий весь унікальний, то для нього використовуємо id, якщо є ймовірність, що з'явиться ще один такий або просто подібних елементів на сторінці кілька, то користуйтеся для оформлення класами.

Підбиваючи підсумки

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

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

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

Селектори є однією, якщо не найважливішою частиною CSS. Вони формують каскад і визначають, як стилі застосовуються до елементів сторінки.

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

CSS3 приніс нові селектори, відкриваючи цілий новий Світможливостей та покращень існуючої практики. Тут ми обговоримо селектори як старі так і нові, а також як найкращим чином їх використовувати.

Типові селектори

Перед глибоким зануренням у деякі складніші селектори і ті, які пропонуються в CSS3, давайте поглянемо на деякі найбільш типові селектори на сьогодні. Ці селектори включають селектори типу, класи та ідентифікатори.

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

H1 (...) .tagline (...) #intro (...)

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

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

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

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

Селектор article h2 є селектором нащадка і вибирає лише елементи

, які знаходяться всередині елемента

. Зверніть увагу, незалежно від того, де живе елемент

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

, він завжди буде обраний. Крім того, будь-який елемент

за межами елемента

не буде обрано.

Нижче наведено заголовки, з яких вибрано рядки 3 та 5.

Article h2 (...)

...

Цей заголовок буде обраний

Цей заголовок буде обраний

Прямий дочірній селектор

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

Наприклад, article > p є прямим дочірнім селектором лише коли елементи

Знаходяться безпосередньо всередині елемента

. Будь-який елемент<р>розміщений поза елементом

або вкладений усередині іншого елемента, крім

, не буде обрано.

Нижче, абзац на рядку 3, є єдиним прямим нащадком його батька

, тому і вибрано.

Article > p (...)

Цей абзац буде обрано

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

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

Загальний споріднений селектор

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

Селектор h2~p - це загальний споріднений селектор, він шукає елементи

Які слідують після будь-яких елементів

у тому ж батька. Щоб елемент

Був обраний, він має йти після будь-якого елемента

.

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

H2 ~ p (...)

...

Цей абзац буде обрано

Цей абзац буде обрано

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

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

Погляньмо на сусідній селектор h2 + p. Буде обрано лише елементи

Ті, що йдуть безпосередньо після елементів

. В обох також має бути один і той самий батьківський елемент.

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

H2 + p (...)

...

Цей абзац буде обрано

Приклад сусідніх селекторів

☰

Input ( display: none; ) label, ul ( border: 1px solid #cecfd5; border-radius: 6px; ) label ( color: #0087cc; cursor: pointer; display: inline-block; font-size: 18px; padding: 5px 9px; transition: all .15s ease; ) label:hover ( color: #ff7b29; ) ; ) nav ( max-height: 0; overflow: hidden; transition: all .15s ease; ) input:checked ~ nav ( max-height: 500px; ) ul ( list-style: none; margin: 8px 0 0 0; padding: 0; width: 100px; ) li ( border-bottom: 1px solid #cecfd5; ) li:last-child ( border-bottom: 0; ) a ( color: #0087cc; text-decoration: none; ) a:hover ( color: #ff7b29; )

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

Деякі розглянуті типові селектори також можуть бути визначені як селектори атрибутів, в якому елемент вибирається на основі значення class або id . Ці селектори атрибутів class і id широко використовують і досить потужні, але це лише початок. Інші селектори атрибутів з'явилися останніми роками, зокрема, зробили великий стрибок вперед разом із CSS3. Тепер елементи можуть бути вибрані на основі того, чи є атрибут і яке значення він містить.

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

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

A (...)

...

Селектор атрибуту =

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

A (...)

...

Селектор атрибуту *=

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

A (...)

...

Селектор атрибута ^=

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

A (...)

...

Селектор атрибута $=

Протилежністю попереднього селектора є селектор атрибутів, де значення закінчується певним текстом. Замість використання символу ^ застосовується знак долара ($) у квадратних дужках селектора між ім'ям атрибута та знаком рівності. Використання символу долара означає, що значення атрибута має закінчуватися вказаним текстом.

A (...)

...

Селектор атрибута ~=

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

A (...)

...

Селектор атрибута | =

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

A (...)

...

Приклад селекторів атрибутів

• PDF-документ
• Word-документ
• Зображення
• Аудіо
• Відео

Ul ( list-style: none; margin: 0; padding: 0; ) a ( background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: none; ) a:hover ( color: #ff7b29; ) a ( background-image: url("images/pdf.png"); ) a ( background-image: url("images/doc.png"); ) a ( background-image: url("images/image.png"); ) a ( background-image: url("images/audio.png"); ) a ( background-image: url("images/video.png" );

Огляд селекторів атрибутів

приклад	Назва	Опис
a	Селектор наявності атрибуту	Вибирає елемент, якщо даний атрибут присутній.
a	Селектор атрибуту =	Вибирає елемент, якщо значення даного атрибуту точно відповідає зазначеному.
a	Селектор атрибуту *=	Вибирає елемент, якщо значення атрибута містить принаймні один екземпляр зазначеного тексту.
a	Селектор атрибута ^=	Вибирає елемент, якщо значення даного атрибуту починається із зазначеного тексту.
a	Селектор атрибута $=	Вибирає елемент, якщо значення даного атрибута закінчується вказаним текстом.
a	Селектор атрибута ~=	Вибирає елемент, якщо значення даного атрибута розділено пробілами і точно збігається з одним вказаним словом.
a	Селектор атрибута | =	Вибирає елемент, якщо значення даного атрибута розділене дефісом і починається із вказаного слова.

Псевдокласи

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

Псевдокласи посилань

Деякі основні псевдокласи включають два псевдокласи, що обертаються навколо посилань. Це псевдокласи :link та :visited і вони визначають, що посилання було або не було відвідане. Щоб задати стиль посилання, яке ще не було відвідане, в гру входить псевдоклас :link , а псевдоклас :visited задає стиль посилань, які користувач вже відвідав на основі їхньої історії перегляду.

A:link (...) a:visited (…)

Псевдокласи дії користувача

До елемента можуть динамічно застосовуватися засновані на діях користувачів різні псевдокласи, які включають :hover , :active і :focus . Псевдоклас:hover застосовується до елемента, коли користувач рухає курсор над елементом, найчастіше використовується з посиланнями. Псевдоклас:active застосовується до елемента, коли користувач приводить у дію елемент, наприклад, при натисканні на нього. І, нарешті, псевдоклас: focus застосовується до елемента, коли користувач зробив елемент точкою уваги сторінки, часто за допомогою клавіші Tab, переходячи від одного елемента до іншого.

A:hover (...) a:active (...) a:focus (...)

Псевдокласи стану інтерфейсу

Подібно до посилань існують також деякі псевдокласи, пов'язані зі станом елементів інтерфейсу користувача, зокрема, усередині форм. Ці псевдокласи включають: enabled,: disabled,: checked і: indeterminate.

Псевдоклас :enabled вибирає поля, які включені та доступні для використання, а псевдоклас :disabled вибирає поля, які містять прив'язаний до них атрибут disabled . Багато браузери за замовчуванням затемнюють такі заблоковані поля для інформування користувачів про те, що поле не доступне для взаємодії, проте їх стиль може бути налаштований за бажанням через псевдоклас: disabled.

Input:enabled (...) input:disabled (...)

Останні два елементи стану інтерфейсу, псевдокласи :checked і :indeterminate обертаються навколо прапорців та перемикачів. Псевдоклас :checked вибирає прапорці або перемикачі, які, як ви можете очікувати, позначені. Коли жоден прапорець або перемикач не помічений і не вибраний, він живе в невизначеному стані, для якого може бути використаний псевдоклас :indeterminate для націлювання на подібні елементи.

Input:checked (...) input:indeterminate (…)

Псевдокласи структури та положення

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

:first-child, :last-child та:only-child

Перші структурні псевдокласи, які вам швидше за все трапляться, це: first-child,: last-child і: only-child. Псевдоклас :first-child вибере елемент, якщо це перша дитина в батьку, тоді як псевдоклас :last-child вибере елемент, якщо він останній у батьку. Ці псевдокласи ідеально підходять для вибору першого або останнього елемента в списку та ін. Крім того, only-child вибере елемент, якщо він є єдиним елементом у батька. Як альтернатива, псевдоклас :only-child може бути записаний як :first-child:last-child , однак у :only-child нижче специфічність.

Тут селектор li:first-child визначає перший пункт списку, тоді як li:last-child визначає останній пункт списку, таким чином вибираються рядки 2 і 10. Селектор div:only-child шукає

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

у цьому пункті списку.

Li:first-child (...) li:last-child (...) div:only-child (...)

• Цей пункт буде обраний
• Цей div буде обраний
• ...
  ...
• Цей пункт буде обраний

:first-of-type, :last-of-type та:only-of-type

Знаходження першої, останньої та єдиної дитини у батька дуже корисне і часто тільки це і потрібно. Однак іноді ви хочете вибрати тільки першу, останню або єдину дитину певного типу елемента. Наприклад, ви бажаєте вибрати лише перший або останній абзац усередині статті або, можливо, лише зображення у статті. На щастя, в цьому допомагають псевдокласи: first-of-type,: last-of-type і: only-of-type.

Псевдоклас :first-of-type вибере перший елемент свого типу всередині батька, тоді як псевдоклас :last-of-type вибере останній елемент цього типу всередині батька. Псевдоклас: only-of-type вибере елемент, якщо він є єдиним такого типу в батькові.

У наведеному нижче прикладі псевдокласи p:first-of-type і p:last-of-type виберуть, відповідно, перший та останній абзаци у статті, незалежно від того, чи вони є насправді першими чи останніми дітьми у статті. Рядки 3 і 6 обрані цими селекторами. Селектор img:only-of-type визначає зображення у рядку 5, як єдине зображення, що з'являється в статті.

P:first-of-type (...) p:last-of-type (...) img:only-of-type (...)

...

Цей абзац буде обрано

Цей абзац буде обрано

...

Нарешті, є кілька псевдокласів структури та положення, які вибирають елементи, засновані на номері або виразі алгебри. Ці псевдокласи включають :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) і :nth-last-of-type(n) . Всі ці унікальні псевдокласи починаються з nth і набувають числа або виразу всередині круглих дужок, що позначається символом n.

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

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

Як уже згадувалося, використання конкретного числа в псевдокласі обчислює з початку або з кінця дерева документа та вибирає один відповідний елемент. Наприклад, селектор li:nth-child(4) вибере четвертий пункт у списку. Підрахунок починається з першого пункту списку і збільшується на одиницю кожного пункту списку, поки, нарешті, не виявить четвертий пункт і вибере його. При зазначенні конкретного числа воно має бути позитивним.

Вирази для псевдокласів бувають у форматі an, an+b, an-b, n+b, -n+b та -an+b. Те саме вираз може бути перекладено і читатися як (a×n)±b. Змінна a позначає множник, з урахуванням якого обчислюватимуться елементи, тоді як змінна b позначає, звідки буде починатися чи відбуватися відлік.

Наприклад, селектор li:nth-child(3n) визначатиме кожен третій елемент пункту списку. Використання цього виразу відповідає 3×0, 3×1, 3×2 тощо. Як ви можете бачити, результати цього виразу вибирають третій, шостий і кожен кратний елемент трьом.

Крім того, як значення можуть бути використані ключові слова odd і even . Як і слід очікувати, вони вибиратимуть, відповідно, непарні чи парні елементи. Якщо ключові слова не залучають, вираз 2n+1 вибере всі непарні елементи, а вираз 2n вибере всі парні елементи.

Селектор li:nth-child(4n+7) визначить кожен четвертий пункт списку починаючи з сьомого пункту. Знову ж таки, використання цього виразу еквівалентно (4×0)+7, (4×1)+7, (4×2)+7 і так далі. Результати цього виразу приведуть до вибору сьомого, одинадцятого, п'ятнадцятого та кожного четвертого елемента.

При використанні аргументу n без числа попереду змінна a розцінюється як рівна 1. Селектор li:nth-child(n+5) вибере кожен пункт списку, починаючи з п'ятого, залишивши перші чотири пункти списку не вибраними. У виразі це розуміється як (1×0)+5, (1×1)+5, (1×2)+5 тощо.

Для створення складніших речей можуть бути задіяні негативні числа. Наприклад, селектор li:nth-child(6n-4) відраховуватиме кожен шостий пункт списку, починаючи з -4, вибравши другий, восьмий, чотирнадцятий пункти списку і так далі. Той самий селектор li:nth-child(6n-4) також може бути записаний як li:nth-child(6n+2) без використання негативної змінної b.

Негативна змінна або негативний аргумент n повинен супроводжуватись позитивною змінною b. Коли аргументу n передує негативна змінна a то змінна b визначає, наскільки високо буде досягнутий відлік. Наприклад, селектор li:nth-child(-3n+12) вибере кожен третій пункт списку перших дванадцяти пунктах. Селектор li:nth-child(-n+9) вибере перші дев'ять пунктів списку, оскільки змінна a без заявленого числа за замовчуванням дорівнює -1.

:nth-child(n) та:nth-last-child(n)

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

Використовуючи псевдоклас: nth-child(n), давайте поглянемо на селектор li:nth-child(3n). Він визначає кожен третій пункт списку, таким чином будуть вибрані рядки 4 та 7.

Li:nth-child(3n) (…)

• Цей пункт буде обраний
• Цей пункт буде обраний

Використання іншого виразу в псевдокласі: nth-child (n) дасть іншу вибірку. Селектор li:nth-child(2n+3) , наприклад, визначить кожен другий пункт списку, починаючи з третього. В результаті будуть обрані пункти у рядках 4 та 6.

Li:nth-child(2n+3) (...)

• Цей пункт буде обраний
• Цей пункт буде обраний

Чергова зміна висловлювання, на цей раз із негативним значенням, дасть новий вибір. Тут селектор li:nth-child(-n+4) визначає чотири верхні пункти списку, залишаючи інші пункти не виділеними, таким чином будуть обрані рядки з 1 по 4.

Li:nth-child(-n+4) (...)

• Цей пункт буде обраний
• Цей пункт буде обраний
• Цей пункт буде обраний
• Цей пункт буде обраний

Додавання негативного числа перед аргументом n знову змінює вибір. Тут селектор li:nth-child(-2n+5) визначає кожен другий пункт списку перших п'яти пунктів, таким чином, будуть обрані пункти в рядках 2, 4 і 6.

Li:nth-child(-2n+5) (...)

• Цей пункт буде обраний
• Цей пункт буде обраний
• Цей пункт буде обраний

Зміна псевдокласу :nth-child(n) на :nth-last-child(n) перемикає напрямок рахунку, тепер підрахунок починається з кінця дерева документа. Селектор li:nth-last-child(3n+2) , наприклад, визначає кожен третій пункт списку, починаючи з другого до останнього, рухаючись у напрямку початку списку. Тут вибрано пункти списку у рядках 3 та 6.

Li:nth-last-child(3n+2) (...)

• Цей пункт буде обраний
• Цей пункт буде обраний

:nth-of-type(n) та:nth-last-of-type(n)

Псевдокласи :nth-of-type(n) і :nth-last-of-type(n) дуже схожі на :nth-child(n) і :nth-last-child(n) , проте замість того, щоб вважати кожен елемент всередині батька псевдокласи :nth-of-type(n) і :nth-last-of-type(n) враховують лише елементи свого типу. Наприклад, при підрахунку абзаців у статті псевдокласи :nth-of-type(n) і :nth-last-of-type(n) пропустять будь-які заголовки,

або різні елементи, які не є абзацами, в той час як :nth-child(n) і :nth-last-child(n) будуть вважати кожен елемент, незалежно від його типу, вибираючи тільки ті з них, які відповідають елементу в вказаному селекторі. Крім того, ті ж можливі вирази, що застосовуються в :nth-child(n) і :nth-last-child(n) також доступні в псевдокласах :nth-of-type(n) і :nth-last-of-type (n) .

Використовуючи псевдоклас :nth-of-type(n) у селекторі p:nth-of-type(3n) ми можемо визначити кожен третій абзац у батьку, незалежно від інших родинних елементів усередині батька. Тут вибираються абзаци у рядках 5 та 9.

P:nth-of-type(3n) (...)

...

Цей абзац буде обрано

...

Цей абзац буде обрано

Як і з псевдокласами :nth-child(n) і :nth-last-child(n) , основна відмінність між :nth-of-type(n) і :nth-last-of-type(n) полягає в тому, що :nth-of-type(n) вважає елементи початку дерева документа, а :nth-last-of-type(n) вважає елементи з кінця дерева документа.

Використовуючи псевдоклас :nth-last-of-type(n), ми можемо записати селектор p:nth-last-of-type(2n+1) , який визначає кожен другий абзац з кінця батьківського елемента, починаючи з останнього абзацу. Тут вибираються абзаци у рядках 4, 7 та 9.

P:nth-last-of-type(2n+1) (...)

...

Цей абзац буде обрано

...

Цей абзац буде обрано

Цей абзац буде обрано

Псевдоклас: target

Псевдоклас :target використовується для стилізації елементів, коли значення атрибута id збігається з вказівником фрагмента URI. Такий фрагмент в URI розпізнається за допомогою символу ґрат (#) і того, що безпосередньо слідує за ним. Адреса http://example.com/index.html#hello включає покажчик hello. Коли він збігається зі значенням атрибуту id у елемента на сторінці, наприклад,

Псевдоклас:empty

Псевдоклас:empty дозволяє вибрати елементи, які не містять дітей або тексту. Коментарі, інструкції з обробки та порожній текст не вважаються дітьми та не розглядаються як такі.

Використання псевдокласу div:empty визначить

без дітей чи тексту. Нижче вибрано

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

містить коментар, він не вважається дитиною, таким чином залишаючи

порожній. Перший

містить текст, третій містить одну прогалину, а останній містить дочірній елемент , таким чином, всі вони виключені і обрані.

Div:empty (...)

Привіт

Псевдоклас: not

Псевдоклас :not(x) приймає аргумент та відфільтровує вибірку, яка буде зроблена. Селектор p:not(.intro) використовує псевдоклас :not визначення кожного абзацу без класу intro . Елемент абзацу визначається на початку селектора, потім слідує псевдоклас :not(x) . Усередині дужок йде селектор заперечення, у разі клас intro .

Нижче обидва селектори div:not(.awesome) і :not(div) використовують псевдоклас :not(x) . Селектор div:not(.awesome) визначає будь-який

без класу awesome , в той час як селектор :not(div) визначає елемент, який не є

. В результаті вибирається

у рядку 1, а також два розділи у рядках 3 та 4. Єдиний не вибраний елемент це

з класом awesome , оскільки він виходить за межі двох псевдокласів.

Div:not(.awesome) (...) :not(div) (...)

Цей div буде обраний

...

Цей розділ буде обраний Цей розділ буде обраний

Приклад із псевдокласами

...

Номер	Гравець	Позиція	Зріст	Вага
8	Марко Белінеллі	G	6-5	195
5	Карлос Бузер	F	6-9	266

Table ( border-collapse: separate; border-spacing: 0; width: 100%; ) th, td ( padding: 6px 15px; ) th ( background: #42444e; color: #fff; text-align: left; ) tr :first-child th:first-child ( border-top-left-radius: 6px; ) tr:first-child th:last-child ( border-top-right-radius: 6px; ) td ( border-right: 1px solid #c6c9cc; border-bottom: 1px solid #c6c9cc; ) td:first-child ( border-left: 1px solid #c6c9cc; ) child td:first-child ( border-bottom-left-radius: 6px; ) tr:last-child td:last-child ( border-bottom-right-radius: 6px; )

Огляд псевдокласів

приклад	Назва	Опис
a:link	Псевдоклас посилань	Вибирає посилання, які користувач не переглядав.
a:visited	Псевдоклас посилань	Вибирає посилання, які відвідували користувач.
a:hover	Псевдоклас дії	Вибирає елемент, коли користувач наводить курсор.
a:active	Псевдоклас дії	Вибирає елемент, коли користувач активує його.
a:focus	Псевдоклас дії	Вибирає елемент, коли користувач зробив його точкою уваги.
input:enabled	Псевдоклас стану	Вибирає елемент у доступному стані.
input:disabled	Псевдоклас стану	Вибирає елемент у відключеному стані за допомогою атрибута disabled .
input:checked	Псевдоклас стану	Вибирає прапорець або перемикач, який було позначено.
input:indeterminate	Псевдоклас стану	Вибирає прапорець або перемикач, який не помічений або не помічений, залишаючи його в невизначеному стані.
li:first-child	Структурний псевдоклас	Вибирає перший елемент у батька.
li:last-child	Структурний псевдоклас	Вибирає останній елемент у батька.
div:only-child	Структурний псевдоклас	Вибирає єдиний елемент у батька.
p:first-of-type	Структурний псевдоклас	Вибирає перший елемент свого типу у батька.
p:last-of-type	Структурний псевдоклас	Вибирає останній елемент свого типу у батька.
img:only-of-type	Структурний псевдоклас	Вибирає єдиний елемент свого типу у батька.
li:nth-child(2n+3)	Структурний псевдоклас	Вибирає елемент, який відповідає заданій кількості або виразу, вважаючи всі елементи з початку дерева документа.
li:nth-last-child(3n+2)	Структурний псевдоклас	Вибирає елемент, який відповідає заданій кількості або виразу, вважаючи всі елементи з кінця дерева документа.
p:nth-of-type(3n)	Структурний псевдоклас	Вибирає елемент, який відповідає заданому числу або виразу, вважаючи лише елементи цього з початку дерева документа.
p:nth-last-of-type(2n+1)	Структурний псевдоклас	Вибирає елемент, який відповідає заданій кількості або виразу, вважаючи лише елементи цього типу з кінця дерева документа.
section:target	Псевдоклас: target	Вибирає елемент, у якого значення атрибута ID збігається з покажчиком фрагмента URI.
div:empty	Псевдоклас:empty	Вибирає елемент, який не містить дітей або тексту.
div:not(.awesome)	Псевдоклас: not	Вибирає елемент, не поданий заявленим аргументом.

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

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

Текстові псевдоелементи

Першими реалізованими псевдоелементами були текстові псевдоелементи: first-letter і: first-line. Псевдоелемент :first-letter визначає першу букву тексту всередині елемента, тоді як :first-line визначає перший рядок тексту всередині елемента.

У демонстрації нижче перша літера абзацу з класом alpha задана великим розміром шрифту та помаранчевим кольором, як і перший рядок абзацу з класом bravo . Ця вибірка зроблена за допомогою текстових псевдокласів: first-letter і: first-line, відповідно.

Alpha:first-letter, .bravo:first-line ( color: #ff7b29; font-size: 18px; )

Lorem ipsum dolor...

Integer eget enim...

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

Псевдоелементи, що генеруються вміст

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

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

A:after ( color: #9799a7; content: " (" attr(href) ")"; font-size: 11px; )

Шукати в ІнтернетіВивчіть, як створити сайт

Демонстрація псевдоелементів, що генеруються вмістом

Псевдоелемент::selection

Псевдоелемент ::selection визначає виділену користувачем частину документа. Виділення може бути стилізоване, але тільки за допомогою властивостей color , background , background-color і text-shadow . Варто зазначити, що якість background-image ігнорується. У той же час, скорочена властивість background може бути використана для додавання кольору, але будь-які зображення будуть ігноруватися.

Двокрапка (:) і подвійна двокрапка (::)

Псевдоелемент ::selection був доданий до CSS3 у спробі відокремити псевдокласи від псевдоелементів за допомогою подвійної двокрапки, яка була додана до псевдоелементів. На щастя, більшість браузерів будуть підтримувати обидва значення, одиночні або подвійні двокрапки у псевдоелементів, проте псевдоелемент ::selection завжди повинен починатися з подвійного двокрапки.

При виділенні будь-якого тексту демонстрації нижче фон стає помаранчевим завдяки псевдоелементу ::selection . Також зверніть увагу на ::-moz-selection. Префікс від Mozilla було додано, щоб забезпечити найкращу підтримкудля всіх браузерів.

::-moz-selection ( background: #ff7b29; ) ::selection ( background: #ff7b29; )

Демонстрація псевдоелементів

Продовжити читання

Arrow ( background: #2db34a; color: #fff; display: inline-block; height: 30px; line-height: 30px; padding: 0 12px; position: relative; text-decoration: none; ) arrow:after ( content: ""; height: 0; position: absolute; width: 0; ) .arrow:before ( border-bottom: 15px solid #2db34a; border-left: 15px solid transparent; #2db34a; left: -15px; ) .arrow:after ( border-bottom: 15px solid transparent; border-left: 15px solid #2db34a; border-top: 15px solid transparent; right: -15px; ) .arrow:hover ( background: #ff7b29; ) .arrow:hover:before ( border-bottom: 15px solid #ff7b29; border-top: 15px solid #ff7b29; ) .arrow:hover:after ( border-left: 15px solid #ff7b29; )

Підтримка селекторів у браузерах

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

CSS3.info пропонує інструмент CSS3 Selectors Test, який інформуватиме вас про те, які селектори підтримуються браузером. Також непоганою ідеєю перевіритиме підтримку браузера безпосередньо в ньому.

На Smashing Magazine

Understanding:nth-child Pseudo-class Expressions на SitePoint

Taming Advanced CSS Selectors на Smashing Magazine

Останнє оновлення: 21.04.2016

Визначення стилю починається із селектора. Наприклад:

Div( width:50px; /* ширина */ height:50px; /* висота */ background-color:red; /* колір фону */ margin: 10px; /* відступ від інших елементів */ )

У цьому випадку селектором є div. Ряд селекторів успадковують назву елементів, що форматуються, наприклад, div, p, h2 і т. д. При визначенні такого селектора його стиль буде застосовуватися до всіх елементів відповідних даному селектору. Тобто вище певний стиль застосовуватиметься до всіх елементів

на веб-сторінці:

Селектори CSS

Тут на сторінці 3 елементи div, і всі вони будуть стилізовані:

Класи

Іноді для тих самих елементів потрібна різна стилізація. І тут ми можемо використовувати класи.

Для визначення селектора класу CSS перед назвою класу ставиться точка:

RedBlock(background-color:red; )

Назва класу може бути довільною. Наприклад, у разі назва класу - " redBlock " . Однак при цьому в імені класу дозволяється використовувати літери, числа, дефіси та знаки підкреслення, причому починати назву класу має обов'язково з літери.

Також варто враховувати регістр імен: назви "article" та "ARTICLE" представлятимуть різні класи.

Після визначення класу ми можемо застосувати його до елемента за допомогою атрибута class . Наприклад:

Визначимо та використовуємо кілька класів:

Класи CSS

Ідентифікатори

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

Визначення стилів для ідентифікаторів аналогічне до визначення класів, тільки замість точки ставиться символ решітки #:

Шапка сайту

Основний вміст

Футер

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

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

Крім селекторів тегів, класів та ідентифікаторів у css також є так званий універсальний селектор, Що представляє знак зірочки (*). Він застосовує стилі до всіх елементів на html-сторінці:

*( background-color: red; )

Стилізація групи селекторів

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

CSS3

Селектори

Група селекторів

Деякий текст...

Група селекторів може містити як селектори тегів, так і селектори класів та ідентифікаторів, наприклад:

H1, #header, .redBlock( color: red; )

CSS selectors define the elements to which a set of CSS rules apply.

Basic selectors

Universal selector Selects all elements. Optionally, це може бути віднесено до конкретного namespace або до all namespaces.
Syntax:* ns |* *|*
Example:* буде match all the elements of the document. Тип selector Selects all elements that have the given node name.
Syntax: elementname
Example: Input буде мати один елемент, який використовується для створення interactive controls для web-базованих форм в order to accept data from the user; wide wireless of types of input data and control widgets are available, depending on device and user agent. "> element. Class selector Selects all elements that have the given class attribute.
Syntax:. classname
Example:.index will match any element that has class of "index". ID selector Selects element based on the value of its id atribut. Вони повинні бути лише одним елементом з Given ID в документі.
Syntax:#idname
Example:#toc will match the element that has the ID "toc". Attribute selector Selects all elements that have the given attribute.
Syntax:[ attr ] [ attr = value ] [ attr ~= value ] [ attr |= value ] [ attr ^= value ] [ attr $= value ] [ attr *= value ]
Example:буде match all elements that have autoplay attribute set (to any value).

Grouping selectors

Selector list The , є grouping метод, його selects all the matching nodes.
Syntax: A, B
Example: div, span will match both and ) є generic container for flow content. Це не впливає на вміст або оголошення until styled using CSS.">

елементів.

Combinators

Descendant combinator The (space) combinator selects nodes що є descendants of first element.
Syntax: A B
Example: div span will match all elements that are inside a ) is generic container for flow content. Це не впливає на вміст або оголошення until styled using CSS.">

element. Child combinator The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all element is used до represent an item in a list.">

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

element. General sibling combinator The ~ combinator selects siblings. Це означає, що другий елемент сповниться першим (якщо не потрібно належним чином), і як share the same parent.
Syntax: A ~ B
Example: p ~ span will match all elements that follow a element represents a paragraph.">

, immediately or not. Adjacent sibling combinator The + combinator selects adjacent siblings. Це означає, що другий елемент прямо оголошується вперше, і як share the same parent.
Syntax: A + B
Example: h2 + p буде match all element represents a paragraph.">

elements that directly follow an

. Column combinator The || комбінатор selects nodes which belong to a column.
Syntax: A || B
Example: col || td буде match all element defines cell of table that contains data. It participates in the table model."> Елементи, що до кінця рядка елементів, визначені в коло, в таблиці і використовуються для визначення загальних сеансів на всіх спільних клітинах. It is generally found within a element."> .

Pseudo

Pseudo classes The: pseudo allow the selection elements based on state information that is not contained in the document tree.
Example: a:visited буде match all element (або anchor element), з його href atribut, створювати hyperlink до веб-сторінок, файлів, e-mail адреси, місцями в тій же сторінці, або будь-який URL-адреса може бути адресою."> elements that have been visited by the user. Pseudo elements The:: pseudo represent entities, які не включаються в HTML.
Example: p::first-line will match the first line of all element represents a paragraph.">

елементів.

Specifications

Specification	Status	Comment

• Програми
• Безпека
• Новини
• Цікаве
• Поради
• Новини
• Огляди
• Приєднуйтесь!

  Вже підписано понад 6 000 осіб.
  Отримуйте найсвіжіші статті.

  ПІДПИСАТИСЯ