Псевдоклассы css: nth-child и nth-of-type

Содержание:

CSS синтаксис:
More Examples
- Example
- Example
CSS Reference
CSS Properties
Селектор класса
CSS Properties
CSS Properties
More Examples
- Example
- Example
CSS Свойства
CSS Properties
Пример использования

CSS синтаксис:

:nth-of-type(номер | ключевое слово | формула) {
блок объявлений;
}

В качестве значения псевдокласса :nth-of-type() может выступать не только порядковый номер дочернего элемента определенного типа, но и ключевые слова,
которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

even (четные элементы)
odd (нечетные элементы)

Кроме того псевдокласс :nth-of-type(), как и :nth-child в качестве значения может использовать простую математическую формулу:

p:nth-of-type(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная со второго внутри родительского элемента будет стилизована:

4n – каждый четвертый элемент определенного типа.
2 – с какого элемента начинать.

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

p:nth-of-type(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная с третьего (-1 элемента нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизован:

4n – каждый четвертый элемент определенного типа.
-1 – с какого элемента начинать.

More Examples

Example

Могу ли я использовать:before или:after псевдо-элемент в поле ввода?

Odd and even are keywords that can be used to match child elements whose index
is odd or even.

Here, we specify two different background colors for odd and even p elements,
counting from the last child:

p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{

background: blue;
}

Example

Using a formula (an + b). Description: a represents a
cycle size, n is a counter (starts at 0), and b is an
offset value.

Here, we specify a background color for all p elements whose index is a
multiple of 3, counting from the last child:

p:nth-last-child(3n+0)
{

background: red;
}

❮ Previous
CSS Selectors Reference
Next ❯

CSS Reference

List style ( type, image, position)

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

Css свойство word-break

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Селектор класса

Рис. 4 Селектор класса в CSS.

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

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

.test { /* имя класса в таблице стилей задается через точку */
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}

После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

<h2 class = "test">Заголовок второго уровня</h2> /* задаем класс для элемента*/

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
	<h2>Обычный заголовок второго уровня</h2>
	<h2 class = "test">Заголовок с заданным классом</h2>
</body>
</html>

Результат нашего примера:

Рис. 5 Использование селектора класса.

Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример выделения одного слова</title>
<style>
.test { 
color: #0F0; /* задаём цвет текста в hex формате */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
	<h2>Обычный заголовок <span class = "test">второго</span> уровня</h2>
</body> 
</html>

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.

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

a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Properties

More Examples

Example

Odd and even are keywords that can be used to match child elements whose index
is odd or even (the index of the first child is 1).

Here, we specify two different background colors for odd and even p elements:

p:nth-last-of-type(odd)
{

background: red;
}
p:nth-last-of-type(even)
{

background: blue;
}

Example

Using a formula (an + b). Description: a represents a
cycle size, n is a counter (starts at 0), and b is an
offset value.

Here, we specify a background color for all p elements whose index is a
multiple of 3:

p:nth-last-of-type(3n+0)
{

background: red;
}

❮ Previous
CSS Selectors Reference
Next ❯

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Properties

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора :nth-of-type</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $("button").click(function(){ // задаем функцию при нажатиии на кнопку
	    var str = $(this).text(); // присваиваем переменной текстовое содержимое элемента <button>, который был нажат
	    $("td").css("background", "#fff"); // выбираем каждый элемент <td> в документе и задаем цвет заднего фона белый.
	    $("td" + str ).css("background", "orange"); // создаем селектор из элемента <td> и значения текста той кнопки, которая была нажата, после этого добавляем цвет заднего фона.
	    $(".info").text('$("td'+str+'")'); // выводим в блок со значением info селектор, который был использован.
	});
		</script>
	</head>
	<body>
		<div class = "control">
			<button>:nth-of-type(2)</button>
			<button>:nth-of-type(3)</button>
			<button>:nth-of-type(even)</button>
			<button>:nth-of-type(odd)</button>
			<button>:nth-of-type(3n)</button>
			<button>:nth-of-type(3n+1)</button>
			<button>:nth-of-type(3n+2)</button>
			<button>:nth-of-type(3n-1)</button>
			<button>:nth-of-type(3n-2)</button>
		</div>
		<table>
			<tr>
				<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
			</tr>
			<tr>
				<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
			</tr>
			<tr>
				<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
			</tr>
			<tr>
				<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
			</tr>
		</table>
		<div class = "info"></div>
	</body>
</html>

В этом интерактивном примере с использованием селектора :nth-of-type выбираем и стилизуем элементы <td> (ячейка данных) в зависимости от их размещения (элементы определенного типа, которые является дочерним элементами своих родительских элементов). Для демонстрации работы необходимого селектора нажмите на кнопку (элемент <button>), текст, которой выступает в роли значения селектора:

Выбор ячеек данных таблицы по элементарной математической формуле:

Интерактивный пример использования jQuery селектора :nth-of-typejQuery селекторы