Справка:CSS/Селекторы

Селекторы в CSS имеют довольно важное значение, в связи с каскадностью ─ приоритетом одних селекторов над другими (см. Справка:CSS/Принципы) и помогают выбрать конкретные элементы из всех, что есть на странице.

Как выбрать правильный селектор[]

Воспользовавшись Инспектором элементов (см.Справка:CSS/Основы#Как править CSS) вы увидите, правила с какими селекторами применены на Фэндоме по умолчанию. Скопировав их (или найдя соответствующие на страницах медиавики других вики) можно гарантировать наиболее рабочее правило.

форма записи: селектор {правило}

Базовые селекторы[]

Универсальный селектор (*) //звёздочка
- Выбирает любой (каждый) элемент.
Селектор тегов (тег) (например, div)
- Выбирает какой-то определенный тег.
Селектор классов (.класс) (например, .wikitable)
- Выбирает какой-то определенный класс.
Селектор идентификаторов (#id) (например, #EditPageTitle)
- Выбирает элемент с уникальным id.
Селекторы атрибутов (обычно пара атрибут=значение)
- простой (имеет атрибут): [атрибут] ([accesskey])
- содержит строго: [атрибут=""] ([target="_blank"])
- начинается с: [атрибут^=""] ([href^=https:])
- оканчивается на: [атрибут$=""] ([href$=".css"])
- содержит что-то: [атрибут*=""] ([href*="значение"])
- содержит одно из значений через пробел: [атрибут~=""] ([class~="table"] <table class="table width">)
- встречается через дефис: [атрибут|=""] ([class|="block"] <div class="my-block">)

Все они могут сочетаться друг с другом (в пары и более, одновременно):
[attr1][attr2] * (← пример контекстного селектора) div.class a#link

Объединение селекторов[]

Если одно и то же правило применяется к нескольким селекторам ─ их можно записать через запятую:
h1,h2,h3 {border-bottom:1px solid black} h4,h5 {border-bottom:none}

Группы селекторов[]

Контекстные (селекторы, записанные через пробел) li a
- Выбирает элемент, являющийся любым по счету потомком.
<ul><li>*<span><a>*</a></span>...</li></ul>
Соседние (селекторы через +) h2 + hr
- Выбирает элемент, если тот следует за указанным.
<ul><li><h2>*</h2><hr>*...</li></ul>
Дочерние (селекторы через >) p > img
- Выбирает элемент, если тот непосредственный потомок родителя. См. Справка:Табуляция
<ul><li><p>*<img>*</p>...</li></ul>
Родственные (через ~) q ~ p
- Выбирает элементы, перед которыми есть указанный родственный (не обязательно соседний),
  т.е. оба принадлежат одному и тому же родительскому в указанном порядке.
<ul><li><q>*</q><img><p>*</p>...</li></ul>

Псевдоклассы и псевдоэлементы[]

общая черта псевдоклассов в их форме записи через одинарное двоеточие

Псевдокласс "не"[]

:not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис: <селектор>:not { ... }

Состояния элементов[]

:active
- Определяет стиль для активной ссылки (т.е. при нажатии на нее).
:focus
- Определяет стиль для элемента получающего фокус.
  (например, текстовое поле формы с активным курсором)
:hover
- Определяет стиль элемента при наведении на него курсора мыши.
:link
- Применяется к ссылкам, которые еще не посещались пользователем.
:visited
- Применяется к ссылкам, уже посещённым пользователем.
::target
- Применяется к «целевому элементу»
  другими словами: к элементу, чей идентификатор указан в адресной строке.

Дерева элементов (порядковые)[]

:first-child и :last-child
- Задает стилевое оформление первого/последнего элемента своего родителя.
:first-of-type и :last-of-type
- Задает правила стилей для первого/последнего дочернего элемента указанного типа.
:only-child
- Применяется к дочернему элементу, только если он единственный у родителя.
  Аналогичен использованию :first-child:last-child или :nth-child(1):nth-last-child(1).
:only-of-type
- Применяется к дочернему элементу указанного типа, только если он единственный у родителя.
  Аналогичен использованию :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).
:nth-child (чёт | нечет | <число> | <выражение>) {...} / :nth-last-child
- Используется для добавления стиля к элементам на основе нумерации в дереве элементов.
  /В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
:nth-of-type (чёт | нечет | <число> | <выражение>) {...} / :nth-last-of-type
- Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
  /В отличие от псевдокласса :nth-of-type отсчет ведется не от первого элемента, а от последнего.

Например: (5-6)

пятая строка-не заголовок таблицы (tr:nth-child(5))
каждый третий столбец таблицы (td:nth-of-type(3n))
первые три строки таблицы (tr:nth-of-type(-n+3))
каждые пять, начиная с третьего (:nth-child(5n-2))

Языка текста[]

Единственный псевдокласс ─ :lang, может быть полезен для смены кавычек цитат в зависимости от языка.

  q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ 
  }
  q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
  }
  q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */ 
    quotes: "\00AB" "\00BB"; 
  }

Другие[]

:root

Определяет корневой элемент документа. Для веб он всегда соответствует элементу <html>.

:empty

соответствует пустому элементу (которые не содержат дочерних элементов, текста или пробелов).

Оставшиеся: :checked, :default, :disabled, :enabled, :optional,

:read-only, :read-write, :required, :valid, :checked

Псевдоэлементы[]

имеют схожую форму записи с псевдоклассами, только через ::

1. :before и :after добавляют на страницу отдельный элемент перед/после родительского. Пример:

/**Герои сбоку страницы**/
@media only screen and (min-width:1250px) {
body.skin-oasis::before { content: '';	z-index: 0; /*отображение*/
  /*размеры*/  height:900px; width:900px;
  /*позиция*/  position:fixed; top:0; right:50%;        
  /*картинка*/  background-image:
    url("https://images.wikia.com/ladybug/ru/images/7/70/Герои_сбоку_страницы.png"); 
  /*позиция картинки*/  background-position:28px 180px;
  /*исключение повтора*/  background-repeat:no-repeat;
}
body.editor::before {margin-right: -16px} /*фикс для классического редактора*/
}  /*параметры при макс ширине*/
@media only screen and (min-width:1596px) {
 /*смещение при изменении ширины страницы*/
body.skin-oasis::before {margin-right: 88px}
 /*фикс для классического редактора*/
body.editor::before {margin-right: 60px}
}

подробнее про медиавыражения см. CSS/Переменные и медиавыражения

2. ::first-letter и ::first-line задает стиль первого символа/первой строки форматированного текста.
Могут быть изменены свойства шрифта, полей, отступов, границ, цвета и фона.
(/только шрифт, цвет текста и фона)

3. ::selection применяет стиль к выделенному пользователем тексту.
(допускаются свойства: color, background и background-color)