Useful :nth-child recipes

Содержание:

Чередование цвета строк (:nth-of-type)
Кроссбраузерность
Как работает CSS-селектор nth-child
:nth-of-type
CSS Reference
CSS Properties
Пример использования
Вопросы и задачи по теме
CSS Reference
CSS Properties
Особенности использования
:nth-child
Приоритет селекторов
CSS Properties
CSS Properties

Чередование цвета строк (:nth-of-type)

Каждый из нас неоднократно видел таблицы с чередованием цвета строк (эффект зебры): этот эффект полезен тем, что упрощает просмотр данных по строкам. Стилевое оформление такого рода лучше всего выполняется средствами уровня представления, то есть CSS. Традиционно задача решалась включением в строки таблицы дополнительных имен классов (например, odd и even для нечетных и четных строк соответственно).

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

Селектор nth-of-type находит каждый n-й элемент конкретного типа, определяемый формулой или ключевыми словами. Формулы будут более подробно рассмотрены позднее, а пока разберемся с ключевыми словами, потому что их проще понять.

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

Фактически этот селектор означает: «Найти каждую четную строку таблицы и задать ее цвет. Затем найти каждую нечетную строку таблицы и задать ее цвет. Так «зебровая» окраска таблицы реализуется без использования сценарного кода или дополнительных имен классов в строках.

Очередная версия стилевого оформления таблицы выглядит так:

Кроссбраузерность

Css макет — свойство position

nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход

Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки

Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

Как работает CSS-селектор nth-child

@media

В CSS существует селектор, если быть более точным, псевдо-селектор, называемый 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. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

Теперь попробуем следующее выражение: nth-child(2n+1):

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:

:nth-of-type

Псевдоэлементы. что такое

Что меня часто не удовлетворяет, так это то, что псевдокласс nth child CSS отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

<section> 
  <h1>lorem ipsum;</h1> 
  <p>Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;</p> 
  <p>Nunc sed turpis. Donec posuere vulputate arcu;</p> 
</section>

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em.

Можно попробовать применить код section p:first-child, так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела — h1. В этом случае необходимо использовать селектор :first of type CSS.

Существует целый ряд селекторов этого типа — :first-of-type, :last-of-type, :nth of type и :nth-last-of-type. Они ведут себя так же, как :nth-child, но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9, в IE8 поддерживается только :first child CSS. В прошлом они не раз помогли мне решить несколько сложных задач.

Данная публикация является переводом статьи «AtoZ CSS Screencast: nth-child and nth-of-type» , подготовленная редакцией проекта.

CSS Reference

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

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

gap
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
row-gap

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора :nth-child</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>, который был нажат
	    $("tr").css("background", "#fff"); // выбираем каждый элемент <tr> в документе и задаем цвет заднего фона белый.
	    $("tr" + str ).css("background", "orange"); // создаем селектор из элемента <tr> и значения текста той кнопки, которая была нажата, после этого добавляем цвет заднего фона.
	    $(".info").text('$("tr'+str+'")'); // выводим в блок со значением info селектор, который был использован.
	});
		</script>
	</head>
	<body>
		<div class = "control">
			<button>:nth-child(2)</button>
			<button>:nth-child(3)</button>
			<button>:nth-child(even)</button>
			<button>:nth-child(odd)</button>
			<button>:nth-child(3n)</button>
			<button>:nth-child(3n+1)</button>
			<button>:nth-child(3n+2)</button>
			<button>:nth-child(3n-1)</button>
			<button>:nth-child(3n-2)</button>
			<div class = "info"></div>
		</div>
		<table>
			<tr><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>3</td><td>3</td><td>3</td></tr>
			<tr><td>4</td><td>4</td><td>4</td></tr>
			<tr><td>5</td><td>5</td><td>5</td></tr>
			<tr><td>6</td><td>6</td><td>6</td></tr>
			<tr><td>7</td><td>7</td><td>7</td></tr>
			<tr><td>8</td><td>8</td><td>8</td></tr>
		</table>
	</body>
</html>

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

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

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:
Составьте следующие HTML страницы:
1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title:
  
  Практическое задание № 5.
2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved»:
  
  Практическое задание № 6.
3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы <p>) в соответствии с изображением:
  
  Практическое задание № 7.

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

Псевдоклассы
и псевдоэлементы

Селекторы. Часть 4.

CSS Reference

CSS Properties

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
row-gap

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

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

Задавать стиль через псевдокласс можно двумя способами

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

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

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

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

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

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

:nth-child

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

Возьмем обычный список, зададим симпатичные стили его элементам и отдельно раскрасим 5ый элемент:

See the Pen aboqOvL by Websitio (@Websitio) on CodePen.

Таким образом можно выбрать несколько элементов, 5ый и 7ой:

See the Pen wvwyaGw by Websitio (@Websitio) on CodePen.

Переменная n

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

Рассмотрим на примере.
При n=0 получаем 2х0=0. Нулевых элементов нет — ничего не покрасится.
При n=1 2х1=2. Стили применятся ко второму по порядку элементу.
При n=2 2х2=4. Стили применятся к четвертому элементу.
И т.д.

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

Для чётных элементов существует также специальное ключевое слово.

Аналогично для нечетных чисел есть специальное слово или запись через счетчик n

n=0 получаем 2х0+1=1. 1ый элемент.
n=1 2х1+1=3. 3ий элемент.
n=2 2х2+1=5. 5ый элемент.

В примере ниже одновременно применены odd и even.

See the Pen vYBdOxb by Websitio (@Websitio) on CodePen.

Более сложные выражения

— стили применятся к каждому 5му элементу начиная с 4го

See the Pen LYPQVLB by Websitio (@Websitio) on CodePen.

Выделить все элементы кроме нескольких начальных

Если в формуле an+b задать b как большое положительное число, то элементы с номером меньше b не будут покрашены, а всеостальные, начиная с номера b — будут

See the Pen rNBJVGG by Websitio (@Websitio) on CodePen.

Отрицательный n

Такая запись позволит выделить только 5 начальных элементов, а все остальные не выделять.

See the Pen ZEzrGay by Websitio (@Websitio) on CodePen.

Комбинирование выражений в :nth-child

Можно применять последовательно несколько

Первая часть выражения выделит элементы с 3го до бесконечности, вторая до 13го.
Стили применяться к элементам на пересечении этих двух множеств: от 3 до 13. Всего будут выделены 11 элементов.

See the Pen WNeMvMx by Websitio (@Websitio) on CodePen.

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

See the Pen qBWxdKJ by Websitio (@Websitio) on CodePen.

Или не будем писать плохой код и переопределять цвета, а зададим 2 отдельных правила:

See the Pen eYOVNje by Websitio (@Websitio) on CodePen.

Особенность :nth-child

ищет лишь те элементы, которые соответствуют типу селектора, к которому применены

Пусть в теге есть дочерние элементы и

Запись сработает только для тегов strong. Соответствующие номера попадающие на тег будут пропущены

Обратите внимание, элемент номер 8 является первым, т.е. нечетным strong’ом, но четным элементом в наборе

И к нему будет применен фон, потому что расчет идет среди всех элементов набора.

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

Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).

Специфичность селекторов удобно представлять в виде 4 чисел: .

При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.

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

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

универсальный селектор (не добавляет вес) – ;
селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – ;
селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – ;
селектор по идентификатору добавляют единичку ко второй цифре – ;

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

Например:

– ;
– ;
– ;
– ;
– ;
– ;
– ;
– ;
– ;
– ;

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

Например:

<div class="alert-warning" style="background-color: #ffc107;"> ... </div>

В CSS:

.alert-warning {
  background-color: #ffa000 !important;
}

В этом примере элементу будет установлен тот фон к которому добавлено слово . перебивает любой вес.

Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если добавлено к нескольким из них.

В этом случае будет применено то значение CSS-свойства c у которого больше вес селектора.

К примеру, если добавить к CSS-свойству расположенному в , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

Например:

<p id="message" style="font-size: 20px !important;">...</p>

CSS:

p#message {
  font-size: 16px !important;
}

В этом примере к элементу будет применено CSS-свойство со значением 20px, т.к. хоть у каждого из них имеется состояние , но специфичность style () больше чем у селектора ().

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-weightgapgridgrid-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-eventspositionquotesresizerightrow-gapscroll-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