Селекторы 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;
}Использование
<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>В этом примере красным цветом выделяется любой элемент, который имеет атрибут "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" выделяется красным цветом.
Демонстрация
: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. Я надеюсь, что этот обзор помог вам понять их назначение.