Как выбрать каждый второй элемент css

Как с помощью CSS выбрать определенный элемент с классом?

Допустим на странице несколько div ‘ов. С классом или без. И есть несколько div ‘ов с классом .class-name , положение которых в документе неизвестно. Но нужно выбрать первый (или второй, третий, четвертый…) div с классом .class-name из общего количества. С помощью CSS это можно как-то сделать? Думал получится с .class-name:nth-of-type(n) . Но в этом случае приходится вручную указывать положение из общего количества всех div ‘ов. А хотелось бы указывать его исходя из количества дивов с классом . class-name .

Отслеживать

9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака

Как выбрать каждый второй элемент css

Псевдокласс CSS :nth-child позволяет вам выбрать один или несколько элементов в соответствии с их порядком следования на странице в соответствии с формулой. Некоторые примеры:

Допустимые значения псевдокласса

Значение, указываемое в скобках, означает номера элементов, которым будет присвоен определенный стиль, и может быть задан одним из следующих способов:

• слово odd – указание всех нечетных элементов-наследников;
• even – указание всех четных элементов;
• положительное целое число – указание одного элемента;
• формула вида an + b , в которой – указание группы элементов, члены которой выбираются с определенной периодичностью – где a , b – целые числа, n – счетчик, которому поочередно присваиваются целые положительные значения начиная с 0. Если n = 0 , то an не указываются, a и b могут быть отрицательными.

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

Обратиться к нечетным элементам можно как значением – odd , так и с помощью формулы 2n+1 . Точно так же even можно заменить формулой 2n (каждый второй).

На примере мы сделали таблицу, где для четных элементов установили голубой фон для строк, а для нечетных – светло-зеленый.

Несмотря на то что n может быть любым натуральным числом, учитываются лишь результаты вычисления формулы, равные существующим номерам тегов, то есть с #1 по номер, равный числу элементов – наследников данного родителя.

При необходимости можно задавать в одной строке более одного псевдокласса, объединяя накладываемые ими ограничения.

А вот цепочка из трех псевдоклассов:

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

Особенности использования

Задавать стиль через псевдокласс :nth-child() можно двумя способами

• указывая тип выделяемого элемента: tr :nth-child(2n) ;

• записывая без селектора: :nth-child(-n+3) .

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

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

Но что же делать, если элементы разнородные – например, у заголовка, кроме подзаголовков, есть и абзацы – а стиль нужно присвоить только некоторым подзаголовкам?

На такой случай в CSS припасен другой инструмент, который учитывает теги только определенного типа. Это :nth-of-type() , еще один псевдокласс. То есть если у вас в списке элементы разного типа, и вы хотите выбрать по определенному правилу только элементы какого-то одного типа, используйте nth-of-type вместо nth-child .

Псевдоклассы группы child

При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.

Пример

Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.

У всех пунктов списка будет жёлтый фон:

У первого пункта списка (первого дочернего элемента) будет тёмно-зелёный фон:

У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:

У второго пункта списка будет зелёный фона:

У предпоследнего пункта списка будет розовый фон:

Как пишется

Есть три суперпростых по своей логике работы псевдокласса из этого набора:

• : only — child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: : first — child : last — child или : nth — child ( 1 ) : nth — last — child ( 1 ) , но зачем так сложно, если можно проще?
• : first — child — выбирает первый дочерний элемент в родителе.
• : last — child — выбирает последний дочерний элемент в родителе.

Псевдоклассы, несущие в себе сочетание букв nth , работают гораздо интереснее. Для их правильной работы нужно указать в скобках паттерн, по которому будут выбираться дочерние элементы.

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

• : nth — child ( odd ) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
• : nth — child ( even ) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например, : nth — child ( 3 ) выберет третий дочерний элемент, подходящий под левую часть селектора.

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу : nth — child ( 3n ) . Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.

Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth — child ( 6n+10 ) .

Псевдокласс : nth — last — child работает абсолютно аналогично, только счёт ведётся с конца.

Подсказки

�� Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс : nth — child , вне зависимости от класса и типа элемента.

�� Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.

Как ра­бо­та­ет nth-child

Существует такой селектор, точнее псевдокласс, называемый :nth-child . Вот пример его использования:

Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью :nth-child .

Всё зависит от того, что находится между скобками. Селектор :nth-child принимает два ключевых слова: even и odd . Тут всё просто: even выбирает чётные элементы, такие как 2-й, 4-й, 6-й и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.

Как видно из первого примера, :nth-child также принимает в качестве параметра выражения. В том числе и простейшие уравнения, иначе говоря, просто числа. Если поставить их в скобки, будет выбран только один элемент с соответствующим номером. Например, вот как выбрать только пятый элемент:

Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

• (3 × 0) + 3 = 3 = 3-й элемент
• (3 × 1) + 3 = 6 = 6-й элемент
• (3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт :nth-child(2n+1) ?

• (2 × 0) + 1 = 1 = 1-й элемент
• (2 × 1) + 1 = 3 = 3-й элемент
• (2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?

• (3 × 0) = 0 = ничего нет
• (3 × 1) = 3 = 3-й элемент
• (3 × 2) = 6 = 6-й элемент
• (3 × 3) = 9 = 9-й элемент и т.д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3 . Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1 :

• (4 × 0) – 1 = –1 = ничего нет
• (4 × 1) – 1 = 3 = 3-й элемент
• (4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3 :

• –0 + 3 = 3 = 3-й элемент
• –1 + 3 = 2 = 2-й элемент
• –2 + 3 = 1 = 1-й элемент
• –3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	1	8	8	1
3	7	1	1	1	1	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Поддержка браузерами Скопировать ссылку

Селектор :nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child , даже в Internet Explorer.

Всё равно неясно? Скопировать ссылку

Я не большой поклонник фразы я лучше воспринимаю визуальную информацию. И вы, конечно, тоже. Но примеры являются чрезвычайно полезными именно в таких ситуациях. Чтобы облегчить понимание, я сделал небольшую тестовую страничку. На ней вы сможете написать свои уравнения и ниже увидеть то, что попадет в выборку.

Также загляните на страничку полезных рецептов :nth-child , там вы сможете найти код для наиболее распространенных случаев.

CSS псевдо-класс :nth-child(n)

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

Синтаксис

В круглых скобках указывается аргумент, который может быть числом, ключевым словом или числовым выражением в виде an+b, где a и b целые числа, а n — счётчик, автоматически принимающий целые неотрицательные значения от 0 и больше: 0, 1, 2, 3, . .

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

Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:

Часть выражения «an» вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n — счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т.д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

Таким образом пункты списка будут выбираться по следующей формуле:
3 * 0 = 0 — ничего не выбрано
3 * 1 = 3-ий пункт
3 * 2 = 6-ой пункт
и т.д.

Часть выражения «b» позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:

Таким образом пункты списка будут выбираться по следующей формуле:
(3 * 0) + 2 = 2-ой пункт
(3 * 1) + 2 = 5-ый пункт
(3 * 2) + 2 = 8-ой пункт
и т.д.

Похожие публикации:

1. Как добавить плату esp8266 в arduino ide
2. Как добавить шрифт в html через css
3. Как убрать цвет посещенной ссылки css
4. Как увеличить рамку в css

:nth-child

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

/* Выбирает каждый четвёртый элемент среди любой группы соседних элементов */ :nth-child(4n)  color: lime; > 

Синтаксис

Псевдокласс nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов.

Ключевые слова

Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.

Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.

Функциональная запись

Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть s.

Формальный синтаксис

Error: could not find syntax for this item

Примеры

Примеры селекторов

tr:nth-child(odd) или tr:nth-child(2n+1)

Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.

Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.

Описывает седьмой элемент.

Описывает элементы с номерами 5, 10, 15, и т. д.

Описывает элементы с номерами 4, 7, 10, 13, и т. д.

Описывает первые три элемента среди группы соседних элементов.

Описывает каждый элемент

среди группы соседних элементов. Эквивалентно простому селектору p .

Описывает каждый элемент

, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child .

Подробный пример

HTML

h3> code>span:nth-child(2n+1)code>, БЕЗ элемента code><em>code> в группе элементов-потомков. h3> p>Элементы 1, 3, 5 и 7 будут выбраны.p> div class="first"> span>Span 1!span> span>Span 2span> span>Span 3!span> span>Span 4span> span>Span 5!span> span>Span 6span> span>Span 7!span> div> br /> h3> code>span:nth-child(2n+1)code>, С элементом code><em>code> в группе элементов-потомков. h3> p> Элементы 1, 5 и 7 будут выбраны.br /> 3 используется в подсчёте потому что это элемент-потомок, но он не выбран потому что он не code><span>code>. p> div class="second"> span>Span!span> span>Spanspan> em>Это `em`.em> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> div> br /> h3> code>span:nth-of-type(2n+1)code>, С элементом code><em>code> в группе элементов-потомков. h3> p> Элементы 1, 4, 6 и 8 будут выбраны.br /> 3 не используется в подсчёте и не выбран, потому что это code><em>code>, но не code><span>code>, а code>nth-of-typecode> выбирает только потомков этого типа. Элемент code><em>code> полностью пропускается и игнорируется. p> div class="third"> span>Span!span> span>Spanspan> em>Это `em`.em> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> div> 

CSS

html  font-family: sans-serif; > span, div em  padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; > .first span:nth-child(2n + 1), .second span:nth-child(2n + 1), .third span:nth-of-type(2n + 1)  background-color: lime; > 

Результат

Спецификации

Specification
Selectors Level 4 # nth-child-pseudo

Поддержка браузерами

BCD tables only load in the browser

30 CSS селекторов, которые вы должны запомнить

Итак, вы изучили принцип наследования и основные селекторы: id и class — и думаете, что готовы к бою? Но, поверьте, вы очень многое упустили. Несмотря на то, что многие из описанных в этой статье селекторов являются частью спецификации CSS3, и поддерживаются только современными браузерами, вы просто обязаны их знать.

1. *

margin: 0; 

padding: 0; 

Начнём с самого простого.

Универсальный селектор соответствует любому элементу на странице. Часто разработчики используют его для обнуления свойств margin и padding . Это допустимо в тестовом режиме, но я не рекомендую использовать этот селектор в рабочих проектах. Он слишком нагружает браузер.

Универсальный селектор * также можно использовать для стилизации всех потомков элемента.

#container *  

border: 1px solid black; 

В данном примере стиль применится ко всем потомкам элемента #container div . Но, повторюсь, не стоит использовать эту технику слишком часто, а лучше вообще её не использовать.

Совместимость

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

#container  

width: 960px; 

margin: auto; 

Использование символа решётки позволяет обратиться к уникальному идентификатору элемента id . Но старайтесь не злоупотреблять использованием идентификаторов.

Спросите себя: мне действительно нужно использовать id для этого элемента?

Идентификатор id должен быть уникальным и может использоваться на странице только один раз. При возможности старайтесь обходиться без идентификаторов. Старайтесь использовать тэги или псевдоклассы.

Совместимость

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X

.error  

color: red; 

class — это селектор класса. Отличие селектора class от id в том, что класс не должен быть уникальным и может использоваться для выбора нескольких элементов на странице. Использование id позволяет выбрать конкретный уникальный элемент.

Совместимость

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

li a  

text-decoration: none; 

Ещё один из часто используемых типов селекторов — это контекстный селектор. Он используется для выбора элементов, удовлетворяющих определённому контексту. Например, вместо того, чтобы задавать стиль всем ссылкам, вам нужно изменить отображение только тех ссылок, которые расположены внутри несортированного списка.

Совет — Если ваш селектор выглядит так: X Y Z A B.error , то вы совершаете ошибку. Старайтесь избегать таких длинных вложений.

Совместимость

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X

a  color: red; > 

ul  margin-left: 0; > 

Что вы будете делать, если вам понадобится выбрать только элементы определённого типа ? В этом случае вы не сможете использовать id или class . И вам на помощь придёт селектор по типу элемента. Если вам нужны все несортированные списки, просто используйте ul <> .

Совместимость

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited и X:link

a:link  color: red; > 

a:visted  color: purple; > 

Мы используем псевдокласс :link для стилизации ссылок, на которые пользователь ещё не нажимал.

Также нам доступен псевдокласс :visited для стилизации только тех ссылок, на которые пользователь нажал.

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

ul + p  

color: red; 

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

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X > Y

div#container > ul  

border: 1px solid black; 

Разница между селекторами X Y и X > Y в том, что в последнем примере мы выберем только прямого потомка. Например, у нас есть такой код.

 id="container"> 

 List Item

 Child 

 List Item 

 List Item 

 List Item 

Селектор #container > ul выберет только тот элемент ul , который является прямым потомком элемента div с id равным container . Он не выберет, например, элемент ul , являющийся потомком первого элемента li .

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

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

ul ~ p  

color: red; 

Этот селектор похож на X + Y , но он менее строгий. Соседний селектор ( ul + p ) выберет только первый элемент, следующий сразу же за указанным элементом. Селектор X ~ Y выберет все элементы p , расположенные после элемента ul .

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]

a[title]  

color: green; 

Это селектор атрибутов. Он выберет только те ссылки, у которых имеется указанный атрибут title . Но что, если вам нужно что-то более конкретное? Что же.

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href=»foo»]

a[href="https://net.tutsplus.com"]  

color: #1f6053; /* nettuts green */ 

Указанный выше код выберет все ссылки, указывающие на http://net.tutsplus.com. Они окрасятся в зелёный цвет. Стиль остальных ссылок останется без изменений.

Не забудьте, что значение атрибута нужно заключать в кавычки. Особенно внимательны будьте при использовании JavaScript.

Этот метод отлично работает, но он слишком строгий. Что, если ссылка указывает на Nettuts+, но путь прописан как nettuts.com? В этом случае мы можем использовать синтаксис регулярных выражений.

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*=»nettuts»]

a[href*="tuts"]  

color: #1f6053; /* nettuts green */ 

Вот то, что нам нужно. Звёздочка означает, что указанное значение должно быть частью указанного атрибута. Поэтому этот селектор выберет и nettuts.com, и net.tutsplus.com,, и даже tutsplus.com.

Но помните, что этот способ слишком обширен. Что, если у вас будет ссылка, не указывающая на tuts+, но имеющая в адресе слово tuts? Для составления более строго правила используйте ^ и $ , указывающие на начало и конец строки соответственно.

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^=»http»]

a[href^="http"]  

background: url(path/to/external/icon.png) no-repeat; 

padding-left: 10px; 

Вам было интересно как на некоторых сайтах реализован показ иконки возле внешних ссылок? Уверен, вы встречали подобное. Иконка напоминает, что это внешняя ссылка, которая переведёт вас на другой сайт.

Это как раз случай использования символа ^ . В регулярных выражениях он используется для указания начала строки. Если мы хотим выбрать все ссылки, начинающиеся с http , то мы можем использовать код из примера сверху.

Учтите, что мы не ищем http:// . В этом нет необходимости.

А что, если мы хотим стилизовать все ссылки, указывающие, например, на фото? В этом случае нас интересует конец строки.

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=».jpg»]

a[href$=".jpg"]  

color: red; 

Мы используем символ из регулярных выражений $ , который указывает на конец строки. В этом случае мы ищем все ссылки на фото, т.е. путь в них должен заканчиваться на .jpg . Учтите, что это не сработает для файлов gif и png .

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*=»foo»]

a[data-filetype="image"]  

color: red; 

Как же нам выбрать все типы изображений, включая png , jpeg, jpg , gif ? Мы можем создать такой селектор:

a[href$=".jpg"], 

a[href$=".jpeg"], 

a[href$=".png"], 

a[href$=".gif"]  

color: red; 

Но это очень громоздкая и неэффективная конструкция. Другой вариант — использовать пользовательские атрибуты. Мы можем добавить атрибут data-filetype к каждой ссылке, указывающей на изображение.

 href="path/to/image.jpg" data-filetype="image"> Image Link 

Теперь мы можем использовать селектор атрибутов для выбора только этих ссылок.

a[data-filetype="image"]  

color: red; 

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~=»bar»]

a[data-info~="external"]  

color: red; 

a[data-info~="image"]  

border: 1px solid black; 

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

Теперь мы можем создать атрибут data-info и использовать в нём любые значения, разделяя их пробелами. Для примера укажем, что ссылка у нас внешняя и ведёт на изображение.

" href="path/to/image.jpg" data-info="external image"> Нажми на меня, дурашка 

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

/* Выбираем атрибут data-info со значением "external" */ 

a[data-info~="external"]  

color: red; 

/* Выбираем атрибут со значчением "image" */ 

a[data-info~="image"]  

border: 1px solid black; 

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

input[type=radio]:checked  

border: 1px solid black; 

Данный псевдокласс выберет только отмеченные элементы пользовательского интерфейса: радиокнопки или чекбоксы. Вот так просто.

Совместимость

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X:after

Псевдоклассы before и after сейчас очень популярны. Каждый день разработчики находят новые оригинальные способы их использования. Эти псевдоклассы позволяют нам сгенерировать контент вокруг указанного элемента.

Многие впервые знакомятся с этими псевдоклассами при изучении хака clear-fix.

.clearfix:after  

content: ""; 

display: block; 

clear: both; 

visibility: hidden; 

font-size: 0; 

height: 0; 

.clearfix  

*display: inline-block; 

_height: 1%; 

Этот хак использует псевдокласс :after для добавления пробела после элемента. Обязательно занесите этот трюк в свою копилку знаний. Он особенно полезен там, где нельзя использовать overflow: hidden; .

Ещё один интересный пример использования этих псевдоклассов: советы по созданию теней.

Согласно спецификации CSS3, псевдоклассы должны отделяться двойным двоеточим :: . Но современные браузеры прекрасно поймут ваш код и с одним двоеточим. На самом деле я рекомендую вам использовать в своих проектах одно двоеточие.

Совместимость

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

div:hover  

background: #e3e3e3; 

Ой, ну ладно. Вы, конечно же, знаете этот селектор. Официальное его название псевдокласс пользовательского действия . Звучит немного странно. На практике это означает, что вы сможете изменить стиль элемента в момент наведения на него кусора мыши.

Помните, что старые версии Internet Explorer не распознают :hover , если он используется не на ссылках.

Чаще всего вы будете использовать этот селектор для стилизации ссылок ( border-bottom ) при наведении кусора.

a:hover  

border-bottom: 1px solid black; 

Совет — border-bottom: 1px solid black; выглядит гораздо лучше чем text-decoration: underline; .

Совместимость

• IE6+ (в IE6, :hover может применяться только к ссылкам)
• Firefox
• Chrome
• Safari
• Opera

20. X:not(selector)

div:not(#container)  

color: blue; 

Псевдокласс отрицания бывает очень полезен. Представьте, что вам нужно выбрать все тэги div, кроме одного с id равным container . Код выше сделает именно это.

Или, например, если я хочу выбрать каждый элемент на странице (не делайте так), кроме тэгов p.

*:not(p)  

color: green; 

Совместимость

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21. X::pseudoElement

p::first-line  

font-weight: bold; 

font-size: 1.2em; 

Мы можем использовать псевдоэлементы (отделённые символом :: ) для стилизации части элемента: первой строки параграфа или первой буквы. Помните, что псевдоэлементы будут работать только с блоковыми элементами.

Псевдоэлемент отделяется символом ::

Выберем первую букву параграфа

p::first-letter  

float: left; 

font-size: 2em; 

font-weight: bold; 

font-family: cursive; 

padding-right: 2px; 

Этот код найдёт все параграфы на странице и выберет из них только первые буквы.

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

Выберем первую строку параграфа

p::first-line  

font-weight: bold; 

font-size: 1.2em; 

Псеводэлемент ::first-line , как вы уже догадались, выберет только первую строку указанного элемента.

«Для совместимости с уже существующими стилями, браузеры поддерживают старый синтаксис написания псевдоэлементов, задекларированный в спецификациях CSS 1 и 2 ( :first-line, :first-letter, :before и :after). Но для новых псевдоэлементов такой синтаксис не поддерживается.» — Источник

Совместимость

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n)

li:nth-child(3)  

color: red; 

Помните деньки, когда у нас не было возможности выбрать конкретный элемент в стеке? Псевдокласс nth-child решает эту проблему!

Помните, что nth-child принимает в качестве параметра число, но отсчёт ведётся не от нуля. Если вам нужен второй по счёту элемент, используйте li:nth-child(2) .

мы можем использовать этот псевдокласс для выбора нескольких элементов. Например, li:nth-child(4n) позволит нам выбрать каждый четвертый элемент списка.

Совместимость

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23. X:nth-last-child(n)

li:nth-last-child(2)  

color: red; 

Представьте, что у вас есть огромный список ul , а вам нужно выбрать только третий элемент с конца? Вместо того, чтобы делать li:nth-child(397) , вы можете использовать псевдокласс nth-last-child .

Этот метод работает аналогично nth-child , Отличие в том, что отсчёт элементов ведётся с конца.

Совместимость

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n)

ul:nth-of-type(3)  

border: 1px solid black; 

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

Представьте, что у вас на странице есть пять списков. И вам нужно стилизовать только третий список. И у него нет уникального id . Тут вам и пригодится псевдокласс nth-of-type(n) . В примере выше только у третьего списка будет рамка.

Совместимость

• IE9+
• Firefox 3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3)  

border: 1px solid black; 

Да, как в предыдущих примерах, мы можем использовать nth-last-of-type для отсчёта элементов с конца.

Совместимость

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child

ul li:first-child  

border-top: none; 

Этот псевдокласс позволит нам выбрать только первый дочерний элемент. Чаще всего он используется для устранения рамок вокруг первого и последнего элемента списка.

Например, у вас есть какое-то количество строк, каждая из которых имеет border-top и border-bottom . В этом случае первая и последняя строка будут выглядеть не очень красиво.

Многие дизайнеры используют классы first и last для устранения дублирующихся рамок. Но лучше использовать эти псевдоклассы.

Совместимость

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child

ul > li:last-child  

color: green; 

В отличие от first-child , last-child выберет последний дочерний элемент.

Пример

Давайте рассмотрим пример использования этих псевдоклассов. Создадим список.

Markup

 List Item 

 List Item 

 List Item 

Ничего особенного, просто список.

CSS

width: 200px; 

background: #292929; 

color: white; 

list-style: none; 

padding-left: 0; 

padding: 10px; 

border-bottom: 1px solid black; 

border-top: 1px solid #3c3c3c; 

Мы задали фон, убрали дефолтные отступы, добавляемые браузером, и добавили верхний и нижний бордер для каждого элемента li .

Для добавления глубины списку используйте border-bottom для каждого элемента li на пару оттенков темнее, чем цвет фона. Далее добавьте border-top на пару оттенков светлее.

Есть одна проблема: первый и последний элементы списка выглядят не очень. Давайте исправим это с помощью :first-child и :last-child .

li:first-child  

border-top: none; 

li:last-child  

border-bottom: none; 

Совместимость

• IE9+
• Firefox
• Chrome
• Safari
• Opera

Да, IE8 поддерживает :first-child , но не поддерживает :last-child .

28. X:only-child

div p:only-child  

color: red; 

Честно говоря, вряд ли вы будете использовать псеводкласс only-child очень часто. Но он существует, и знание о нём вам точно не повредит.

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

Давайте рассмотрим такой пример.

 
My paragraph here.
  

 Two paragraphs total. 

 Two paragraphs total. 

В этом случае текст во втором элементе div останется без изменений. Только текст в первом div станет красным. Если у элемента более одного наследника, псевдокласс only-child не действует.

Совместимость

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type

li:only-of-type  

font-weight: bold; 

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

Как мы можем решить эту задачу? Можно использовать ul li , но тогда мы выберем все элементы списка. Единственным решением будет использовать only-of-type .

ul > li:only-of-type  

font-weight: bold; 

Совместимость

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type

Псевдокласс first-of-type выбирает первого наследника указанного типа.

Тест

Для лучшего усвоения давайте пройдём тест. Скопируйте этот код в свой текстовый редактор:

 My paragraph here. 

 List Item 1 

 List Item 2 

 List Item 3 

 List Item 4 

Теперь, не читая дальше, попробуйте выбрать только элемент «List Item 2». Читайте дальше после того, как решите задачу (или сдадитесь).

Решение 1

Есть несколько способов решения этой задачи. Начнём с использования first-of-type .

ul:first-of-type > li:nth-child(2)  

font-weight: bold; 

Этот код говорит «найди первый несортированный список, затем найди его прямого наследника, который является элементом списка. Далее выбери второй элемент».

Решение 2

Другой способ — использование соседних селекторов.

p + ul li:last-child  

font-weight: bold; 

Здесь мы находим список ul , следующий сразу же за тэгом p , а потом находим его последний дочерний элемент.

Решение 3

С этими селекторами мы можем делать практически что угодно.

ul:first-of-type li:nth-last-child(1)  

font-weight: bold; 

Здесь мы выбираем первый список ul , затем находим первый элемент списка с конца! 🙂

Совместимость

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

Заключение

Если вам приходится поддерживать старые браузеры, такие как Internet Explorer 6, то будьте осторожны с использованием новых селекторов. Но пусть это не станет поводом отказаться от их изучения. Этим вы сослужите себе плохую службу. Следите за списком совместимости браузеров. Также вы можете использовать великолепный скрипт IE9.js, написанный Дином Эдвардом. Он добавляет поддержку новых селекторов в IE9.

Если вы используете в работе библиотеки JavaScript, такие как jQuery, то всегда старайтесь по возможности использовать нативные CSS3 селекторы вместо предлагаемых библиотекой методов. Это ускорит вашу работу, так как вы снимете с библиотеки нагрузку по обработке селекторов, переложив ее на плечи браузера.

Спасибо за внимание, надеюсь вам пригодятся советы, описанные в этой статье!