Не все, але більш ніж достатньо
Люди, які вивчають XHTML, а також CSS за книгами, нерідко стикаються з тим, що події CSS не повністю описані. Зокрема, описуються лише такі події, як hover, active, visited.Події CSS набагато більші і можливості, які вони дають, дуже великі.
Тут не наводиться повний списокподій, а лише ті, які реально знадобляться сучасному веб-дизайнеру.
Якщо Ви призначаєте блоку подію after, після блоку буде виведено згенерований код, визначений у таблиці стилів. Для визначення коду використовується команда CSS - content, синтаксис якої - content: "XHTML код".
Тобто. вся команда може вигладити так:
#someId:after
(content:"XHTML код") :before Працює так само, як і after, але виводить код до елемента:first-child Задає стиль для першого дочірнього елемента будь-якого іншого елемента.
Допустимо, застосовуючи цю подію до тега h1, перший і лише перший заголовок першого рівня відображатиметься з відповідним стилем. Особливо ефективно використовувати цю подію для стилів вкладених тегів (багаторівневих), наприклад, ось так:
body ol li:first-child(...)(тобто. У всіх списках ol перший елемент li, але не ul, буде відображено із заданими налаштуваннями стилів)
:last-child Задає стиль останнього дочірнього елемента будь-якого іншого елемента. :focus Задає смтиль елементів форм, які отримують фокус, тобто. ті, якими ви клацаєте. Наприклад, можна зробити активне поле для введення тексту, відмінним від неактивного поля. :hover Стиль елемента, на який наведено курсор. Може використовуватися з усіма блоками та текстом (раніше ми розглядали лише посилання). :lang( x) Ставить елементу у відповідність певну мову, не змінюючи вміст елемента. Такий тег можна використовувати, наприклад, виділення посилань на різні джерела. Замість xставиться двозначне міжнародне позначення мови, чи інакше, назва доменної зони. Наприклад, для Росії це ruдля Америки us, і так далі. Якщо елементу потрібно поставити кілька мов відразу, вони повинні розділятися дефісом без пробілів (у порядку зниження важливостей стилів, які визначає кожна мова). :visited Задає стиль відвідуваного посилання:nth-child(x) Задає стиль для певних елементів або одного певного елемента. x може бути виражений:
- числом. У цьому випадку буде виділено лише 1 елемент
- виразами odd (усі непарні елементи) або even (усі парні елементи).
- виразом an+b, де n не змінюється, a та b - довільні числа. Наприклад, 7n+4. Будуть виділені всі елементи, що дають при розподілі на 7 залишок 4. (4, 11, 18 і т.д.) При цьому, якщо a або b дорівнюють 0, їх можна не вказувати. Відлік n елементів ведеться з 0 до n-1
Поглиблене вивчення селекторів CSS
Матеріалів, описаних вище, вистачить багатьом, але не всім. У сайтах великих компаній, публічних проектів, соціальних мережвикористовуються дуже складні селектори CSS і іноді описаного вище функціоналу не вистачає. З іншого боку, CSS повинні взаємодіяти з мовами серверного програмування, тобто. найчастіше CSS до певних сторінок створюється автоматично. При цьому він має безпомилково та правильно функціонувати.
Ми згадували спадковість елементів. Тепер ми розберемо її глибше.
CSS може визначити правила для різних видівспадковості або приналежності елементів до батьківського елементу. Усі вони служать лише вибору елементів, яких буде застосовано правило.
| Комбінатори (створення зв'язку між стилями на основі спадковості) | |
|---|---|
| Adjacent Sibling (+) | Цей комбінатор визначає 2 елементи, які слідують відразу один за одним (між ними немає інших елементів з тим же батьком, що й ті 2 елементи, але можуть бути спадкові їм елементи) і мають одного з батьків. Стиль застосовується одразу до обох елементів. Синтаксис запису (пробіли не враховуються) E+F(...) де E – перший елемент, F – другий елемент. Наприклад, h1+h2(font-family:serif) Цей запис визначить стиль лише для наступних один за одним елементів h1 та h2, які мають одного з батьків. Якщо після h2 стоїть інший тег h2, то стиль не застосовується до нього. |
| Child (>) Combinator | Комбінатор визначає всі елементи, є прямими нащадками одного елемента. Підтримує кілька рівнів вкладеності, наприклад: body > div > p(...) Тобто стиль, стиль буде застосований тільки до параграфів, які є нащадками всіх блоків div, які безпосередньо належать до тегу body. |
| Descendant | Визначає довільний зв'язок між елементами. Тобто елементи не повинні бути прямими спадкоємцями, а просто спадкоємцями одного елемента. Синтаксис (пробіл обов'язковий): E F(...) Наприклад: table.table1 td(...) Тобто стиль буде визначений у всіх стовпцях-нащадках таблиці із класом table1, навіть якщо всередині цієї таблиці є інші таблиці. До стовпців таблиць-спадкоємців також буде застосований стиль. |
| General Sibling (~) | Синтаксис E~F. Комбінатор виконує таку ж функцію, як Adjacent Sibling, за винятком того, що між E і F може бути будь-яка кількість елементів того ж рівня вкладеності і F може бути не один. |
| Атрибути. Селектори атрибутів. Створення власних атрибутів | |
| Equality [=] | Кожен тег може мати атрибут (наприклад, атрибут id, який може бути практично у будь-якого тега, або атрибут width(тільки для блоків)). Ви можете створити свій атрибут, що є текстовим рядком. Наприклад, attr. Створення власних атрибутів стане в нагоді для селекторів атрибутів у CSS. Атрибути можна використовувати разом з комбінаторами. Equality визначає стиль для всіх елементів, певний атрибут яких точно дорівнює зазначеному значенню. Синтаксис: {...} Як бачимо, тут не визначено тегів. Стилі визначаються для всіх елементів, які мають атрибут attдорівнює значенню val. Att і val можуть набувати значень ідентифікаторів (наприклад, для att можуть бути будь-які вивчені атрибути, для val - none, block і т.д.) і рядкові значення, тобто. просто слово (наприклад, визначатиме всі елементи із записом<... attr="test" ...="">). |
| Existence | Визначає всі елементи, що мають атрибут, незалежно від значення. Синтаксис: {...} att - атрибут(або рядкове значення, тобто власний атрибут) |
| Prefix [^=] | Визначає елементи, які мають атрибут att, що приймає значення, що починається з val. Синтаксис: {...} att - атрибут(або рядкове значення, тобто власний атрибут), val - значення атрибута Дуже добрий приклад: Вікіпедія. На цьому сайті всі посилання на інші сайти, крім Вікіпедії, мають позаду значок (стрілку). Ось приклад запису, що дозволяє записати такий стиль: : after (content) |
| Suffix [$=] | Визначає елементи, які мають атрибут att, що приймає значення, що закінчується на val. Синтаксис {...} Такий атрибут недавно почали використовувати, щоб перед різними посиланнями ставити картинки, які візуально вкажуть користувачеві, до якого файлу, сторінці його надішле посилання. Наприклад, перед посиланнями на PDF файлиможна поставити значок PDF. :before (content:"  "}
|
| Substring [*=] | Синтаксис запису: {...} Відбирає всі елементи з атрибутом att, значення якого входить підрядок val. Наприклад, "54" - підрядок "132 54 6", "val" - підрядок "value" і т.д. |
| Whitespace [~=] | Whitespace - те, як і Substring, проте підрядок має бути словом, тобто. оточена в рядку пробілами. |
| Hyphen [|=] | Те ж, що і Substring, проте підрядок має бути частиною атрибуту і розділятися з іншою частиною (частинами) дефісом. Приклад: {...} відбере всі теги з атрибутом lang, у значенні якого є en, наприклад, en-ru, ru-de-en і т.д. |
У цьому закінчується вивчення XHTML+CSS. Далі уроки підуть про JavaScript.
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 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.">
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.
- Цей пункт буде обраний
-
Цей div буде обраний
-
......
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Цей пункт буде обраний
- Understanding:nth-child Pseudo-class Expressions на SitePoint
- Taming Advanced CSS Selectors на Smashing Magazine
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
Селектори є однією, якщо не найважливішою частиною 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 (...)
Приклад селекторів атрибутів
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 (...)
: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
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 |
|---|---|---|
Селектори є однією, якщо не найважливішою частиною 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 (...)
Приклад селекторів атрибутів
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 (...)
: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
поки він знаходиться всередині елемента , він завжди буде обраний. Крім того, будь-який елемент за межами елемента не буде обрано.Нижче наведено заголовки, з яких вибрано рядки 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 (...)
Приклад селекторів атрибутів
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 (...)
: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
за межами елемента не буде обрано.Нижче наведено заголовки, з яких вибрано рядки 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 (...)
Приклад селекторів атрибутів
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 (...)
: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
Нижче наведено заголовки, з яких вибрано рядки 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 (...)
Приклад селекторів атрибутів
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 шукає
Li:first-child (...) li:last-child (...) div:only-child (...)
: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-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 визначить
Div:empty (...)
Псевдоклас: not
Псевдоклас :not(x) приймає аргумент та відфільтровує вибірку, яка буде зроблена. Селектор p:not(.intro) використовує псевдоклас :not визначення кожного абзацу без класу intro . Елемент абзацу визначається на початку селектора, потім слідує псевдоклас :not(x) . Усередині дужок йде селектор заперечення, у разі клас intro .
Нижче обидва селектори div:not(.awesome) і :not(div) використовують псевдоклас :not(x) . Селектор div:not(.awesome) визначає будь-який
Div:not(.awesome) (...) :not(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
