Селекторы CSS3

В этой статье описываются селекторы CSS и принципы их работы. Далее приводится объяснение большинства селекторов, используемых в CSS.

В примерах, приведённых в статье, сначала следует код CSS, затем HTML код, к которому применяются стили. Поэтому попробуйте эти примеры сами.

Создайте HTML страницу, добавьте код CSS, код HTML и увидите результат. К большинству примеров я добавил ссылку для демонстрации их работы.

Также в этой статье вы найдёте некоторые новые селекторы CSS, которые были добавлены в CSS3. Все примеры были протестированы мной в последней версии браузера Google Chrome.

.Class - выбирает все элементы с заданным именем класса.

Содержание

CSS

.MyIntro
{
  font: 15px arial,sans-serif;
  color: red;
}

Использование

<div class="MyIntro">
<p>Меня зовут Pranay Rana.</p>
<p>Я работаю разработчиком ПО.</p>
</div>

#id - выбирает все элементы с заданным ID.

CSS

#MyIntro
{
  font: 15px arial,sans-serif;
  color: red;
}

Использование

<div id="MyIntro">
<p>Меня зовут Pranay Rana.</p>
<p>Я работаю разработчиком ПО.</p>
</div>

На заметку: В HTML вы можете иметь несколько элементов с одинаковым именем класса, но только один элемент с определённым ID.

Элемент HTML - Выбирает все HTML элементы по названию элемента.

CSS

p {
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p>Меня зовут Pranay Rana.</p>
<p>Я работаю разработчиком ПО.</p>
</div>

Элемент HTML Элемент HTML – выбирает все HTML элементы, находящиеся внутри другого HTML элемента.

CSS

div p
{
  font:15px arial,sans-serif;
  color:red;
}
Продвинутые CSS-селекторы, о которых вы не знали

Использование

<div>
<p>Меня зовут Pranay Rana.</p>
<span>
 <p> data </p>
</Span>
</div>
<p>Я работаю разработчиком ПО.</p>

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

Демонстрация

Элемент HTML > Элемент HTML – выбирает все элементы HTML, которые являются прямыми потомками другого элемента HTML.

CSS

div > p
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p>Меня зовут Pranay Rana.</p>
<span>
 <p> data </p>
</span>
</div>
<p>Я работаю разработчиком ПО.</p>

В этом примере все элементы p, которые являются прямыми потомками элементов div, выделяются красным цветом, а элемент p, который не является прямым потомком элемента div, не затрагивается.

Демонстрация

Элемент HTML + Элемент HTML – выбирает все HTML элементы, которые следуют непосредственно после другого HTML элемента.

CSS

div + p
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p>Меня зовут Pranay Rana.</p>
</div>
<p>Я работаю разработчиком ПО.</p>
<p> data </p>

В этом примере элемент p, который следует непосредственно после элемента div, выделяется красным цветом. То есть выделяется текст «Я работаю разработчиком ПО».

Демонстрация

Элемент HTML ~ Элемент HTML – выбирает все HTML элементы, которые следуют за другим HTML элементом.

CSS

div ~ p
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p>Меня зовут Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>Я работаю разработчиком ПО.</p>
<p>Пример моей страницы.</p>

В этом примере элементы p, которым предшествует элемент div, выделяются красным цветом. То есть выделяются тексты «Я работаю разработчиком ПО.» и «Пример моей страницы.».

Демонстрация

[attribute] – выбирает все HTML элементы, которые имеют заданный атрибут.

CSS

[data-name]
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p data-name="pranay">Меня зовут Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>Я работаю разработчиком ПО.</p>
<p data-name="demo">Пример моей страницы.</p>
Некоторые концепции для новичков: Как работают селекторы в CSS

В этом примере красным цветом выделяется любой элемент, который имеет атрибут "data-name", то есть выделяются тексты «Меня зовут Pranay Rana.» и «Пример моей страницы.».

Демонстрация

[attribute=data] – выбирает все HTML элементы, у которых заданный атрибут имеет заданное значение.

CSS

[data-name='demo']
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p data-name="pranay">Меня зовут Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>Я работаю разработчиком ПО.</p>
<p data-name="demo">Пример моей страницы.</p>

В этом примере любой элемент, у которого атрибут "data-name" имеет значение "demo", выделяется красным цветом, то есть выделяется текст «Пример моей страницы.»

Демонстрация

[attribute ^= data] – выбирает все HTML элементы, где заданный атрибут начинается с заданного значения.

CSS

[data-name ^= 'pra']
{
  font:15px arial,sans-serif;
  color:red;
}

Поэтому в примере выше при применении этого стиля выделится текст «Меня зовут Pranay Rana.», так как его атрибут "data-name" начинается с заданного значения "pra".

Демонстрация

[attribute $= data] – выбирает все HTML элементы, у которых заданный атрибут заканчивается заданным значением.

CSS

[data-name ^= 'nay']
{
  font:15px arial,sans-serif;
  color:red;
}

Поэтому в примере выше при применении этого стиля, выделится текст «Меня зовут Pranay Rana.», т.к. значение его атрибута "data-name" заканчивается на "nay".

Демонстрация

[attribute *= data] – выбирает все HTML элементы, у которых заданный атрибут содержит заданное значение.

CSS

[data-name *= 'rana']
{
  font:15px arial,sans-serif;
  color:red;
}

В примере выше при применении этого стиля выделится текст «Меня зовут Pranay Rana.», поскольку значение его атрибута "data-name" содержит "rana".

Демонстрация

[attribute ~= data] – выбирает все элементы HTML, у которых заданный атрибут содержит заданное слово.

CSS

[data-name ~= 'page']
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
<p data-name="pranay_page">Меня зовут Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>Я работаю разработчиком ПО.</p>
<p data-name="demo page">Пример моей страницы.</p>

В этом примере любой элемент, атрибут "data-name" которого содержит слово «page», выделяется красным цветом, то есть выделяется текст «Пример моей страницы.»

Демонстрация

:first-child – выбирает первый элемент (первого потомка) внутри родительского элемента.

CSS

li:first-child
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

В этом примере элемент "item1" выделяется красным цветом.

Конические градиенты в CSS3

Демонстрация

:last-child - выбирает последний элемент (последнего потомка) внутри родительского элемента.

CSS

li:last-child
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

В этом примере элемент "item4" выделяется красным цветом.

Демонстрация

:nth-child(n) – выбирает n-ного потомка внутри родительского элемента.

CSS

li:nth-child(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

В этом примере второй элемент li выделяется красным цветом, то есть выделяется элемент "item2".

Демонстрация

:nth-last-child(n) – выбирает n-ного потомка внутри родительского элемента, начиная с конца.

CSS

li:nth-last-child(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

В этом примере второй с конца элемент li выделяется красным цветом, то есть выделяется элемент "item3".

Демонстрация

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

CSS

p:only-child
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
    <p> paragraph 1</p>
</div> 
<div>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <p> paragraph 4</p>
</div>

В этом примере элемент "paragraph 1" выделяется красным цветом, т.к. является единственным наследником элемента div.

Демонстрация

:first-of-type – выбирает первый элемент заданного типа внутри родительского элемента.

CSS

p:first-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
    <p> paragraph 1</p>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
</div>

В этом примере элемент "paragraph 1" выделяется красным цветом.

Демонстрация

:last-of-type – выбирает последний элемент заданного типа внутри родительского элемента.

CSS

p:last-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
    <p> paragraph 1</p>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
</div>

В этом примере элемент "paragraph 3" выделяется красным цветом, т.к. он является последним элементом типа p внутри элемента div.

Демонстрация

:nth-of-type(n) – выбирает n-ный элемент заданного типа внутри родительского элемента.

CSS

p:nth-of-type(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
    <p> paragraph 1</p>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <p> paragraph 4</p>
</div>

В этом примере элемент "paragraph 2" выделяется красным цветом, т.к. он является вторым элементом типа p внутри элемента div.

Демонстрация

:nth-last-of-type(n) - выбирает n-ный с конца элемент заданного типа внутри родительского элемента.

CSS

p:nth-last-of-type(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
    <p> paragraph 1</p>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <p> paragraph 4</p>
</div>

В этом примере элемент "paragraph 3" выделяется красным цветом, т.к. он является вторым с конца элементом p внутри элемента div.

Демонстрация

:only-of-type – выбирает единственный элемент заданного типа внутри родительского элемента.

CSS

p:only-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

Использование

<div>
    <p> paragraph 1</p>
</div> 
<div>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <p> paragraph 4</p>
</div>

В данном примере элемент "paragraph 1" выделяется красным цветом, т.к. он является единственным элементом p внутри элемента div.

Демонстрация

:empty – Выбирает пустой (не имеющий потомков) элемент.

CSS

div:empty
{
width:100px;
height:20px;
background:red;
}

Использование

<div></div> 
<div>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <p> paragraph 4</p>
</div>

В этом примере первый пустой элемент div имеет красный фон.

Демонстрация

::selection – для выделенной области текста применяется заданный цвет.

CSS

::selection
{
  background:green;
}
::-moz-selection
{
  background:green;
}

Использование

<div> <p> paragraph 1</p> </div> 
   <div>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <p> paragraph 4</p>
</div>

В этом примере выделенная область имеет зелёный фон.

Демонстрация

:not(элемент HTML) – выбирает все элементы, кроме заданного.

CSS

:not(span)
{
  font:15px arial,sans-serif;
  color:red;
}
span
{
  color:black;
}

Использование

<p> paragraph 1</p>
 <p> paragraph 2</p>
 <p> paragraph 3</p>
 <p> paragraph 4</p>
 <span> span data</span>

В этом примере весь текст внутри элементов p выделяется красным цветом, а внутри элемента span остаётся чёрным.

Демонстрация

:enable – выбирает все доступные для ввода элементы формы.
:disable – выбирает все недоступные для ввода (имеющие атрибут disabled) элементы формы.

CSS

:input[type="text"]:enabled
{
background:green;
}
input[type="text"]:disabled
{
background:red;
}

Использование

Name: <input type="text" value="Pranay Rana" /><br>
Country: <input type="text" disabled="disabled" value="India" />

В данном примере поле для ввода имени имеет зелёный фон, а поле для ввода страны – красный.

Демонстрация

Заключение

Большинство из селекторов, представленных в этой статье, новые, введённые в CSS3. Я надеюсь, что этот обзор помог вам понять их назначение.