Css selectors second element

CSS-селекторы

Селектор определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

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

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

Синтаксис: * ns|* *|*

Пример: * будет соответствовать всем элементам на странице.

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

Синтаксис: элемент

Пример: селектор input выберет все элементы .

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class .

Синтаксис: .имяКласса

Пример: селектор .index выберет все элементы с соответствующим классом (который был определён в атрибуте class=»index» ).

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

Синтаксис: #имяИдентификатора

Пример: селектор #toc выберет элемент с идентификатором toc (который был определён в атрибуте id=»toc» ).

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

Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

Пример: селектор [autoplay] выберет все элементы, у которых есть атрибут autoplay (независимо от его значения).

Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».

Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинаторы

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

Синтаксис: A, B

Пример: div, span выберет оба элемента — и и .

Комбинатор ‘ ‘ (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).

Синтаксис: A B

Пример: селектор div span выберет все элементы , которые находятся внутри элемента .

Комбинатор ‘>’ в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.

Синтаксис: A > B

Комбинатор ‘~’ выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.

Синтаксис: A ~ B

Комбинатор ‘+’ выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

Синтаксис: A + B

Пример: селектор h2 + p выберет первый элемент , который находится непосредственно после элемента (en-US).

Псевдо

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

Пример: a:visited соответствует всем элементам которые имеют статус «посещённые».

Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.

Ещё пример: input:focus соответствует полю ввода, которое получило фокус.

Знак :: позволяет выбрать вещи, которых нет в HTML.

Пример: p::first-line соответствует первой линии абзаца .

Версии CSS

Спецификация	Статус	Комментарии
Selectors Level 4	Рабочий черновик	Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
Selectors Level 3	Рекомендация	Добавлен комбинатор ~ и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префикс :: двойное двоеточие. Селекторы дополнительных атрибутов.
CSS Level 2 (Revision 1)	Рекомендация	Добавлен комбинатор потомков > и комбинатор следующего соседа + . Добавлен универсальный (*) комбинатор и селектор атрибутов.
CSS Level 1	Рекомендация	Первоначальное определение.

Смотрите также

Found a content problem with this page?

This page was last modified on 22 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

Try it

Note: In the element:nth-child() syntax, the child count includes sibling children of any element type; but it is considered a match only if the element at that child position matches the other components of the selector.

Syntax

:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

Keyword values

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation

Represents elements whose numeric position in a series of siblings matches the pattern An+B , for every positive integer or zero value of n , where:

• A is an integer step size,
• B is an integer offset,
• n is all nonnegative integers, starting from 0.

It can be read as the An+B -th element of a list. The A and B must both have values.

The of syntax

By passing a selector argument, we can select the nth element that matches that selector. For example, the following selector matches the first three list items which have a class=»important» set.

:nth-child(-n + 3 of li.important)  > 

This is different from moving the selector outside of the function, like:

This selector selects list items if they are among the first three children and match the selector li.important .

Examples

Example selectors

Represents the odd rows of an HTML table: 1, 3, 5, etc.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc.

Represents the seventh element.

Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5×0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0 , like in the next example.

Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

Represents the first three elements. [=-0+3, -1+3, -2+3]

Represents every

element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).

p:nth-child(1) or p:nth-child(0n+1)

Represents every

that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).

Represents the eighth through the fifteenth

elements of a group of siblings.

Detailed example

HTML

h3> code>span:nth-child(2n+1)code>, WITHOUT an code><em>code> among the child elements. h3> p>Children 1, 3, 5, and 7 are selected.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>, WITH an code><em>code> among the child elements. h3> p> Children 1, 5, and 7 are selected.br /> 3 is used in the counting because it is a child, but it isn't selected because it isn't a code><span>code>. p> div class="second"> span>Span!span> span>Spanspan> em>This is an `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>, WITH an code><em>code> among the child elements. h3> p> Children 1, 4, 6, and 8 are selected.br /> 3 isn't used in the counting or selected because it is an code><em>code>, not a code><span>code>, and code>nth-of-typecode> only selects children of that type. The code><em>code> is completely skipped over and ignored. p> div class="third"> span>Span!span> span>Spanspan> em>This is an `em`.em> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> div> 

CSS

*  font-family: sans-serif; > span, div em  padding: 5px; border: 1px solid tomato; 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: tomato; > 

Result

Using ‘of ‘

In this example there is an unordered list of names, some of them have been marked as noted using class=»noted» . These have been highlighted with a thick bottom border.

HTML

ul> li class="noted">Diegoli> li>Shilpali> li class="noted">Caterinali> li>Jaylali> li>Tyroneli> li>Ricardoli> li class="noted">Gilali> li>Siennali> li>Titilayoli> li class="noted">Lexili> li>Aylinli> li>Leoli> li>Leylali> li class="noted">Bruceli> li>Aishali> li>Veronicali> li class="noted">Kyoukoli> li>Shireenli> li>Tanyali> li class="noted">Marleneli> ul> 

CSS

*  font-family: sans-serif; > ul  display: flex; flex-wrap: wrap; list-style: none; font-size: 1.2rem; padding-left: 0; > li  margin: 0.125rem; padding: 0.25rem; > li  border: 1px solid tomato; > .noted  border-bottom: 5px solid tomato; > 

In the following CSS we are targeting the even list items that are marked with class=»noted» .

li:nth-child(even of .noted)  background-color: tomato; border-bottom-color: seagreen; > 

Result

Items with class=»noted» have a thick bottom border and items 3, 10 and 17 have a solid background as they are the even list items with class=»noted» .

of selector syntax vs selector nth-child

In this example, there are two unordered lists of names. The first list shows the effect of li:nth-child(-n + 3 of .noted) and the second list shows the effect of li.noted:nth-child(-n + 3) .

HTML

ul class="one"> li class="noted">Diegoli> li>Shilpali> li class="noted">Caterinali> li>Jaylali> li>Tyroneli> li>Ricardoli> li class="noted">Gilali> li>Siennali> li>Titilayoli> li class="noted">Lexili> ul> ul class="two"> li class="noted">Diegoli> li>Shilpali> li class="noted">Caterinali> li>Jaylali> li>Tyroneli> li>Ricardoli> li class="noted">Gilali> li>Siennali> li>Titilayoli> li class="noted">Lexili> ul> 

CSS

*  font-family: sans-serif; > ul  display: flex; flex-wrap: wrap; list-style: none; font-size: 1.2rem; padding-left: 0; > li  margin: 0.125rem; padding: 0.25rem; > li  border: 1px solid tomato; > .noted  border-bottom: 5px solid tomato; > 

ul.one > li:nth-child(-n + 3 of .noted)  background-color: tomato; border-bottom-color: seagreen; > ul.two > li.noted:nth-child(-n + 3)  background-color: tomato; border-bottom-color: seagreen; > 

Result

The first case applies a style to the first three list items with class=»noted» whether or not they are the first three items in the list.

The second case applies a style to the items with class=»noted» if they are within the first 3 items in the list.

Using of selector to fix striped tables

A common practice for tables is to use zebra-stripes which alternates between light and dark background colors for rows, making tables easier to read and more accessible. If a row is hidden, the stripes will appear merged and alter the desired effect. In this example, you can see two tables with a hidden row. The second table handles hidden rows using of :not([hidden]) .

HTML

table class="broken"> thead> tr>th>Nameth>th>Ageth>th>Countryth>tr> thead> tbody> tr>td>Mamitianatd>td>23td>td>Madagascartd>tr> tr>td>Yukitd>td>48td>td>Japantd>tr> tr hidden>td>Tlayolotltd>td>36td>td>Mexicotd>tr> tr>td>Adilahtd>td>27td>td>Moroccotd>tr> tr>td>Vienotd>td>55td>td>Finlandtd>tr> tr>td>Ricardotd>td>66td>td>Braziltd>tr> tbody> table> table class="fixed"> thead> tr>th>Nameth>th>Ageth>th>Countryth>tr> thead> tbody> tr>td>Mamitianatd>td>23td>td>Madagascartd>tr> tr>td>Yukitd>td>48td>td>Japantd>tr> tr hidden>td>Tlayolotltd>td>36td>td>Mexicotd>tr> tr>td>Adilahtd>td>27td>td>Moroccotd>tr> tr>td>Vienotd>td>55td>td>Finlandtd>tr> tr>td>Ricardotd>td>66td>td>Braziltd>tr> tbody> table> 

CSS

.wrapper  display: flex; justify-content: space-around; > td  padding: 0.125rem 0.5rem; > 

.broken > tbody > tr:nth-child(even)  background-color: silver; > 

.fixed > tbody > tr:nth-child(even of :not([hidden]))  background-color: silver; > 

Result

In the first table this is just using :nth-child(even) the third row has the hidden attribute applied to it. So in this instance the 3rd row is not visible and the 2nd & 4th rows are counted as even, which technically they are but visually they are not.

In the second table the of syntax is used to target only the tr s that are not hidden using :nth-child(even of :not([hidden])) .

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник