Вики Сообщества
Advertisement
Вики Сообщества

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

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

Style Locations in Inspect Element.png

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

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

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

  1. Универсальный селектор (*) //звёздочка
    • Выбирает любой (каждый) элемент.
  2. Селектор тегов (тег) (например, div)
    • Выбирает какой-то определенный тег.
  3. Селектор классов (.класс) (например, .wikitable)
    • Выбирает какой-то определенный класс.
  4. Селектор идентификаторов (#id) (например, #EditPageTitle)
    • Выбирает элемент с уникальным id.
  5. Селекторы атрибутов (обычно пара атрибут=значение)
    • простой (имеет атрибут): [атрибут] ([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}

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

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

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

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

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

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

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

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

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

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

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

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

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

См. также