CSS
Селекторы

Вступление

Синтаксис

• # id
• , имя_класса
• : псевдо-имя класса
• :: псевдо-elementname
• [ attr ] / * имеет атрибут attr . * /
• [ attr = " value "] / * имеет атрибут attr , а его значение точно « value ». * /
• [ attr ~ = " значение "] / * имеет атрибут attr , а его значение при разбиении по пробелу содержит « значение ». * /
• [ attr | = " value "] / * имеет атрибут attr , а его значение точно « value », или его значение начинается с « value - ». * /
• [ attr ^ = " value "] / * имеет атрибут attr , а его значение начинается с " value ". * /
• [ attr $ = " value "] / * имеет атрибут attr , а его значение заканчивается « значением ». * /
• [ attr * = " значение "] / * имеет атрибут attr , а его значение содержит « значение ». * /
• имя элемента
• *

замечания

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

обзор

Селекторы атрибутов могут использоваться с различными типами операторов, которые соответствующим образом меняют критерии выбора. Они выбирают элемент, используя наличие заданного атрибута или значения атрибута.

Заметки:

1. Значение атрибута может быть окружено кавычками или двойными кавычками. Никакие кавычки вообще не могут работать, но это не действует в соответствии со стандартом CSS и не рекомендуется.

2. Не существует единой интегрированной спецификации CSS4, поскольку она разделяется на отдельные модули. Тем не менее, существуют модули уровня 4. См. Поддержку браузера .

подробности

[attribute]

Выбирает элементы с заданным атрибутом.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute="value"]

Выбирает элементы с заданным атрибутом и значением.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute*="value"]

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

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute~="value"]

Выбирает элементы с заданным атрибутом и значением, где данное значение отображается в списке, разделенном пробелами.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute^="value"]

Выбирает элементы с заданным атрибутом и значением, где данный атрибут начинается со значения.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute$="value"]

Выбирает элементы с заданным атрибутом и значением, где данный атрибут заканчивается заданным значением.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute|="value"]

Выбирает элементы с заданным атрибутом и значением, где значение атрибута является точно заданным значением или является точно заданным значением, за которым следует - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute="value" i]

Выбирает элементы с заданным атрибутом и значением, где значение атрибута может быть представлено как Value , VALUE , vAlUe или любая другая возможность vAlUe регистра.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Живая демонстрация на JSBin

Специфика селекторов атрибутов

0-1-0

То же, что и селектор классов и псевдоклассы.

*[type=checkbox] // 0-1-0

Обратите внимание, что это означает, что селектор атрибутов может использоваться для выбора элемента по его идентификатору на более низком уровне специфичности, чем если бы он был выбран с помощью селектора ID : [id="my-ID"] нацелен на тот же элемент, что и #my-ID но с более низкой специфичностью.

Подробнее см. Раздел «Синтаксис» .

Комбинаторы

обзор

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

Комбинатор потомков: selector selector

Комбинатор потомков, представленный по меньшей мере одним пространственным символом ( ), выбирает элементы, которые являются потомками определенного элемента. Этот комбинатор выбирает всех потомков элемента (из дочерних элементов вниз).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Живая демонстрация на JSBin

В приведенном выше примере первые два элемента <p> выбираются, поскольку они оба являются потомками <div> .

Детский комбинатор: selector > selector

Ребенок ( > ) комбинатор используются для выбора элементов , которые являются детьми, или прямыми потомками, указанного элемента.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Живая демонстрация на JSBin

Вышеприведенный CSS выбирает только первый элемент <p> , так как он является единственным абзацем, непосредственно выходящим из <div> .

Второй элемент <p> не выбран, потому что он не является прямым дочерним элементом <div> .

Смежный сиблинг-комбинатор: selector + selector

Смежный смежный ( + ) комбинатор выбирает элемент-сиблинг, который немедленно следует за определенным элементом.

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Живая демонстрация на JSBin

В приведенном выше примере выбираются только те элементы <p> которым непосредственно предшествует другой элемент <p> .

Общий сиблинг Combinator: selector ~ selector

Комбинатор общего родства ( ~ ) выбирает всех братьев и сестер, следующих за указанным элементом.

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Живая демонстрация на JSBin

В приведенном выше примере выбираются все элементы <p> которым предшествует другой элемент <p> , независимо от того, находятся ли они непосредственно рядом.

Селектора имен классов

Селектор имен классов выбирает все элементы с именем целевого класса. Например, имя класса .warning будет выбирать следующий элемент <div> :

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

Вы также можете комбинировать имена классов с целевыми элементами более конкретно. Давайте рассмотрим пример выше, чтобы продемонстрировать более сложный выбор класса.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

В этом примере все элементы с .warning класса будут иметь синий цвет текста, элементы с .important класса с имеют оранжевый цвет текста, а также все элементы , которые имеют как .important и .warning имени класса будут иметь красный текст цвет.

Обратите внимание, что внутри CSS объявление .warning.important не имеет пробелов между двумя именами классов. Это означает , что он будет найти только элементы , которые содержат оба названия класса warning и important в своем class атрибута. Эти имена классов могут быть в любом порядке элемента.

Если бы пространство было включено между двумя классами в объявлении CSS, оно будет выбирать только элементы, которые имеют родительские элементы с .warning классов .warning и дочерними элементами с именами .important class.

Селекторы идентификаторов

Селекторы идентификаторов выбирают элементы DOM с целевым идентификатором. Для выбора элемента по определенному идентификатору в CSS используется префикс # .

Например, следующий элемент HTML div ...

<div id="exampleID">
    <p>Example</p>
</div>

... можно выбрать с помощью #exampleID в CSS, как показано ниже:

#exampleID {
    width: 20px;
}

Примечание . Спецификации HTML не позволяют использовать несколько элементов с одинаковым идентификатором

Псевдо-классы

Псевдоклассы - это ключевые слова, которые позволяют выбирать на основе информации, которая находится за пределами дерева документов или которая не может быть выражена другими селекторами или комбинаторами. Эта информация может быть связана с определенным состоянием ( состояние и динамические псевдо-классы), в местах ( структурные и нацелены на псевдо-классы), к отрицанию прежнего ( отрицание псевдо-класса) или на языках ( языки псевдо-класса). Примеры включают, была ли соблюдена ссылка ( :visited ), мышь над элементом ( :hover ), флажок установлен ( :checked отмечен) и т. Д.

Синтаксис

selector:pseudo-class { 
    property: value;
}

Список псевдоклассов:

:visited pseudoclass не может быть использован для большинства стиля во многих современных браузерах больше , потому что это дыра в безопасности. См. Эту ссылку для справки.

Основные селекторы

Примечание . Значение идентификатора должно быть уникальным на веб-странице. Нарушением стандарта HTML является использование значения идентификатора более одного раза в одном и том же дереве документов.

Полный список селекторов можно найти в спецификации CSS Selectors Level 3 .

Как стиль ввода диапазона

HTML

<input type="range"></input>

CSS

Глобальное логическое значение с флажком: проверено и ~ (общий комбинированный блок)

С помощью селектора вы можете легко реализовать глобальное доступное логическое значение без использования JavaScript.

Добавить boolean как флажок

В самом начале вашего документа добавьте столько булевых, сколько хотите, с уникальным id и hidden набором атрибутов:

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

Измените значение boolean

Вы можете переключить логическое значение, добавив label с набором атрибутов for :

<label for="sidebarShown">Show/Hide the sidebar!</label>

Доступ к логическому значению с помощью CSS

Обычный селектор (например .color-red ) указывает свойства по умолчанию. Их можно переопределить, следуя селекторам true / false :

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

Обратите внимание, что <checkbox> , [sibling ...] и <target> должны быть заменены соответствующими селекторами. [sibling ...] может быть конкретным селектором (часто, если вы ленивы) просто * или ничего, если цель уже является братом этого флажка.

Примерами приведенной выше структуры HTML являются:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

В бою

Смотрите эту скрипту для реализации этих глобальных логических элементов.

CSS3: пример выбора диапазона

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

Псевдокласс класса :in-range соответствует, когда элемент имеет свой атрибут значения внутри указанных ограничений диапазона для этого элемента. Он позволяет странице дать обратную связь, что значение, определяемое в настоящее время с помощью элемента, находится в пределах диапазона. [1]

Детский псевдокласс

«Псевдо-класс: nth-child (a + b) CSS соответствует элементу, у которого есть дочерние элементы + b-1 перед ним в дереве документов, для заданного положительного или нулевого значения для n" - MDN: nth-child

Выберите элемент, используя свой идентификатор, без высокой специфичности идентификатора

Этот трюк помогает вам выбрать элемент с использованием идентификатора в качестве значения для селектора атрибутов, чтобы избежать высокой специфичности селектора идентификаторов.

HTML:

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A. The: не пример псевдокласса & B.: focus-in CSS псевдокласс

A. Синтаксис представлен выше.

Следующий селектор соответствует всем <input> элементам в HTML-документе, которые не отключены и не имеют класса .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

Псевдокласс класса :not() также будет поддерживать разделенные запятыми селектора в Selectors Level 4:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Живая демонстрация на JSBin

См. Синтаксис фона здесь .

B. Псевдокласс класса CSS.

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

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

:only-child CSS псевдо-класс представляет собой любой элемент , который является единственным потомком своего родителя.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS:

p:only-child {
  color: blue;
}

В приведенном выше примере выбирается элемент <p> который является единственным дочерним элементом из его родителя, в этом случае a <div> .

Живая демонстрация на JSBin

Селектор last-of-type

:last-of-type выбирает элемент, который является последним дочерним элементом определенного типа его родителя. В приведенном ниже примере css выбирает последний абзац и последний заголовок h1 .

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle