Шпаргалка CSS Selectors

У CSS селектори - це шаблони, що використовуються для виділення елементів DOM.

Ось приклад використання селекторів. У наступному коді aі h1є селектори:

a { color: black; } h1 { font-size 24px; }

Шпаргалка загальних селекторів

headвибирає елемент з headтегом

.red виділяє всі елементи з класу 'червоний'

#nav вибирає елементи з ідентифікатором 'nav'

div.rowвиділяє всі елементи з divтегом та класом 'row'

["]виділяє всі елементи з aria-hiddenатрибутом зі значенням "true"

  • Селектор підстановки. Вибирає всі елементи DOM. Дивіться нижче, як використовувати його з іншими селекторами

Ми можемо поєднати селектори цікавими способами

Кілька прикладів:

li aКомбінатор нащадків DOM. Усі aтеги, які є дочірніми liтегами

div.row *вибирає всі елементи, які є нащадками (або дочірніми) елементів із divтегом та класом 'row'

li > aКомбінатор різниці. Вибирайте прямих нащадків замість усіх нащадків, як селектори нащадків

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

li, aВиділяє всі aелементи та всі liелементи.

li ~ aКомбінатор братів та сестер. Вибирає aелемент після liелемента.

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

Вони також корисні для вибору елементів конструкції з DOM.

Ось деякі з них:

:first-child Націлюйте перший елемент безпосередньо всередині (або дочірній елемент) іншого елемента

:last-child Націліть останній елемент безпосередньо всередині (або дочірній елемент) іншого елемента

:nth-child()Націліть n-й елемент безпосередньо всередині (або дочірній елемент) іншого елемента. Допускає цілі числа, even, odd, або формули

a:not(.name)Вибирає всі aелементи, які не належать до .nameкласу

::afterДозволяє вставляти вміст на сторінку з CSS, замість HTML. Хоча кінцевий результат насправді не в DOM, він відображається на сторінці так, ніби він є. Цей вміст завантажується після елементів HTML.

::beforeДозволяє вставляти вміст на сторінку з CSS, замість HTML. Хоча кінцевий результат насправді не в DOM, він відображається на сторінці так, ніби він є. Цей вміст завантажується перед елементами HTML.

Ми можемо використовувати псевдокласи для визначення особливого стану елемента DOM. Але вони не вказують на елемент самі по собі.

Кілька прикладів:

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

:focus вибирає елемент, що отримує фокус з клавіатури або програмує

:active вибирає елемент, який натискається вказівником миші

:link вибирає всі посилання, на яких ще не натиснуто

:visited вибирає посилання, на яке вже клацнули

Більше інформації про селектор n-ї дитини

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

Синтаксис

 a:nth-child(pattern) { /* Css goes here */ }

Візерунок

Шаблони, прийняті, nth-childможуть мати форму ключових слів або рівняння форми An + B.

Ключові слова

Непарні

Odd повертає всі непарні елементи даного типу.

 a:nth-childe(odd) { /* CSS goes here */ }
Навіть

Навіть повертає всі парні елементи заданого типу.

 a:nth-childe(even) { /* CSS goes here */ }

An + B

Повертає всі елементи, що відповідають рівнянню An + B для кожного додатного цілого значення n (на додаток до 0).

Наприклад, наступне буде відповідати кожному 3-му якірному елементу:

 a:nth-childe(3n) { /* CSS goes here */ }

Ігри

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

Додаткові посилання

Є набагато більше селекторів CSS! Дізнайтеся про них на CodeTuts, CSS-tricks.com або в мережі розробників Mozilla.