Nth-child и nth-of-type
Содержание:
- Пример использования
- Псевдоклассы
- Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков
- CSS Properties
- :nth-of-type
- Вопросы и задачи по теме
- Спецификация
- ), то стиль p:first-child уже не будет отображаться, поскольку
- CSS Properties
- Приоритет селекторов
- CSS Reference
- CSS Properties
- Как работает CSS-селектор nth-child
- Синтаксис
- Связывание таблиц стилей с HTML-кодом
Пример использования
Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль вторым абзацам (элементы <p>) в этих блоках:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдокласс :nth-of-type</title>
<style>
.test p:nth-of-type(2) { /* используем селектор потомков с псевдоклассом :nth-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
<body>
<div class = "test">
<h2>Заголовок второго уровня</h2>
<p>Абзац один</p>
<p>Абзац два</p>
<p>Абзац три</p>
</div>
<div class = "test">
<h2>Заголовок второго уровня</h2>
<p>Абзац один</p>
<p>Абзац два</p>
<p>Абзац три</p>
</div>
</body>
</html>
В этом примере с использованием псевдокласса :nth-of-type мы стилизовали первые абзацы внутри каждого блока.
Результат нашего примера:
Пример использования псевдокласса :nth-of-type.
Рассмотрим пример в котором с использованием псевдокласса :nth-of-type мы будем чередовать изображения слева и справа документа:
<html>
<head>
<meta charset = "UTF-8">
<title>Чередование изображений с использованием псевдокласса :nth-of-type</title>
<style>
img {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
margin: 5px; /* внешние отступы со всех сторон */
}
img:nth-of-type(2n+1) { /* для данной задачи вместо формулы подойдут и значения ключевых слов even и odd (четные и нечетные дочерние элементы) */
float: left; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по левому краю */
border: 2px solid orange; /* устанавливаем сплошнаю границу размером 2 пикселя оранжевого цвета */
}
img:nth-of-type(2n) {
float: right; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по правому краю */
border: 2px solid gray; /* устанавливаем сплошнаю границу размером 2 пикселя серого цвета */
}
</style>
</head>
<body>
<img src = "nich.jpg" alt = "nich">
<img src = "nich.jpg" alt = "nich">
<img src = "nich.jpg" alt = "nich">
<img src = "nich.jpg" alt = "nich">
</body>
</html>
Результат примера:
Пример чередования изображений с использованием псевдокласса :nth-of-type
Отличие :nth-child от :nth-of-type()
Давайте разберем еще очень важный пример, чтобы понять в чем заключается отличие псевдокласса :nth-child от псевдокласса :nth-of-type, который выбирает каждый указанный элемент определенного типа, при этом он является дочерним элементом своего родительского элемента.
Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:
<article> <p>Первый параграф </p> <p>Второй параграф</p> </article>
Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2).
Попробуем проверить как работают оба варианта:
p:nth-child(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
Что не удивительно оба селектора работают для данной задачи. Но в чём разница?
Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h2>), про него мы совсем забыли:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
<article>
<h2>Заголовок второго уровня</h2>
<p>Первый параграф</p>
<p>Второй параграф</p>
</article>
</body>
</html>
Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:
Пример использования псевдоклассов :nth-of-type() и :nth-child().
В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h2>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо.
Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.
CSS селекторы
Псевдоклассы
Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:
-
first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.
-
nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:
-
hover. С помощью этого псевдокласса можно отследить такое действие пользователя, как наведение на элемент и задать при этом стилистические особенности. Например, при наведении на ссылку уберем ее подчеркивание.
- :link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
- :focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.
Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков
С вложенностью селекторов мы познакомилимь. Понятно, что сначала идет родительский элемент (предок), а вложенные в него элементы являются потомками
При чем не важно, какой у них уровень вложенности, все равно для первого элемента они будут потомками. Чтобы задать стили для первого уровня вложенности, т.е
для непосредственного потомка, используют понятие дочернего селектора. Для этого используют символ >, он указывает на дочерний селектор.
В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.
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
:nth-of-type
Похож на предыдущий псевдокласс, но учитывает тип элемента
Возьмем блок и разместим в него через один теги и. Для наглядности сделаем круглыми, а квадратными, а нумерацию не сквозную, а по тегам.
Для начала попробуем простые выражения для псевдокласса
и
В примере можно увидеть, что браузер считает только элементы указанного типа, а не все подряд как в случае с
See the Pen pozaJYr by Websitio (@Websitio) on CodePen.
Выберем нечетные и четные
See the Pen dybdoLE by Websitio (@Websitio) on CodePen.
Комбинированные :nth-of-type
Зададим фон нечетным только из первых 5ти
Зададим фон четным после 5го
See the Pen aboqOrR by Websitio (@Websitio) on CodePen.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:
- Составьте следующие HTML страницы:
-
Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title:
Практическое задание № 5.
-
Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved»:
Практическое задание № 6.
-
С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы <p>) в соответствии с изображением:
Практическое задание № 7.
-
После того как вы выполните упражнения проинспектируйте коды страниц, открыв примеры в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Псевдоклассы
и псевдоэлементы
Селекторы. Часть 4.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация
) — спецификация одобрена W3C и рекомендована как стандарт. - Candidate Recommendation (Возможная рекомендация
) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта. - Proposed Recommendation (Предлагаемая рекомендация
) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения. - Working Draft (Рабочий проект
) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом. - Editor»s draft (Редакторский черновик
) — черновая версия стандарта после внесения правок редакторами проекта. - Draft (Черновик спецификации
) — первая черновая версия стандарта.
CSS (Cascading Style Sheets), или каскадные таблицы стилей
, используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: элемента веб-страницы — селектора
, и команды форматирования — блока объявления
. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
), то стиль p:first-child уже не будет отображаться, поскольку
Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .
Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу
Лишь тогда, когда он будет являться последним дочерним элементом своего родителя
. Добавьте после
Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.
Правило p:nth-child(3) работает для третьего
дочернего тега
(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.
Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.
Второй ребенок
Третий ребенок
Четвертый ребенок
Пятый ребенок
Последний ребенок
/* CSS */
p:first-of-type {
color: violet;
text-transform: uppercase;
}
p:last-of-type {
font-style: italic;
font-size: 0.8em;
}
p:nth-of-type(3) {
color: red;
}
p:nth-of-type(odd) {
background-color: #A2DED0;
}
p:nth-of-type(even) {
background-color: #C8F7C5;
}
h3:only-of-type {
text-decoration: underline;
}
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type
Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым
встречается у родителя
И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type
Второе правило – p:last-of-type – применяет стиль к последнему
дочернему элементу типа p . Как видно из HTML-кода, после последнего тега
Есть еще и тег
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 имеется несколько правил, устанавливающих одно и тоже 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 Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font CombinationsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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
Как работает CSS-селектор nth-child
В 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»:
Синтаксис
Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.
B:first-child {
text-decoration: underline;
}
Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.
-
Все хотят изменить мир сам.
Лев Толстой -
Тот, кто умеет, тот делает, кто не умеет — тот учит других.
Бернард Шоу
На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса:first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.
Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:
Class:first-child {}
:first-child {}
*:first-child {}
Связывание таблиц стилей с HTML-кодом
Подключение с использованием тега <link>
Самым распространенным методом добавления (связывания) внешней таблицы стилей с документом является использование тега <link>.
Элемент <link> определяет связь между документом и внешним ресурсом.
Обращаю Ваше внимание, что элемент размещается всегда внутри элемента (как правило, перед его закрывающим тегом), при этом он может быть использован любое количество раз (содержать различные таблицы стилей). Элемент не требует закрывающего тега и содержит внутри себя только атрибуты
HTML тег <link> имеет следующий синтаксис:
<link rel = "stylesheet" href = "styles.css"> /* синтаксис HTML 5 */ <link rel = "stylesheet" href = "styles.css" type = "text/css"> /* синтаксис HTML 4.01 */
Сразу хочу обратить ваше внимание на то, что атрибут type, который определяет MIME-тип, используемого файла (в нашем случае текстовый файл таблиц стилей) не является обязательным в HTML 5.
Для всех типов документов в HTML 5 необходимы лишь два обязательных атрибута:
- rel = «stylesheet» — определяет отношение между текущим документом и связанным документом на который ведёт ссылка (в нашем случае таблица стилей).
- href — задает URL-адрес местонахождения внешнего файла. Адрес может быть как относительный, так и абсолютный.
Подключение с использованием правила @import
CSS правило @import используется для импорта содержимого CSS файла в текущую таблицу стилей. Это правило должно предшествовать всем другим видам правил, за исключением правила @charset, которое задает кодировку символов, используемую в таблице стилей.
Внешняя таблица стилей может быть подключена к веб-странице с помощью HTML тега <link>, или с использованием встроенного в CSS правила @import, которое по-большому счету делает то же самое. Оба варианта позволяют присоединить таблицы стилей к веб странице.
Основное отличие правила @import заключается в том, что с использованием этого правила вы можете присоединить одну внешнюю таблицу стилей к другой.
Импортирование к внешней таблице стилей
Давайте рассмотрим пример, который позволит нам присоединить несколько таблиц стилей к одной внешней таблице стилей:
/* Содержимое файла anyname.css */
@import url("color.css"); /* импортируем в основной файл содержимое первого файла css */
@import url("fonts.css"); /* импортируем в основной файл содержимое второго файла css */
/* стили, которые находятся в основном файле css */
селектор {
свойство: значение;
}
...
/* Конец содержимого файла anyname.css */
Чтобы присоединить один внешний файл таблиц стилей к другому, необходимо внутри файла к которому добавляется содержимое объявить
правило @import и указать URL путь к этому файлу. Чтобы задать путь необходимо после правила @import указать url(«path/to/file»).
При этом путь, который указывается в круглых скобках может быть как абсолютным, так и относительным.
Информацию о том как задавать абсолютные и относительные пути вы можете узнать в статье учебника HTML 5 «HTML ссылки».
Как и с помощью нескольких тегов <link> вы можете разместить несколько правил @import, чтобы присоединить необходимое количество внешних таблиц стилей.
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе таблицы стилей будут проигнорированы браузерами и не импортированы в файл
Импортирование к внутренней таблице стилей
Кроме того, с использованием правила @import существует возможность привязать внешние таблицы стилей к внутренней таблице стилей документа. Для этого необходимо объявить правило или правила сразу после открывающего тега <style>:
<!DOCTYPE html>
<html>
<head>
<title>Импортирование файла к внутренней таблице стилей</title>
<style>
@import url("color.css"); /* импортируем к внутренней таблице стилей документа содержимое первого файла css */
@import url("fonts.css"); /* импортируем к внутренней таблице стилей документа содержимое второго файла css */
h1 {
text-align: center; /* выравниваем заголовок по центру */
color: red; /*устанавливаем цвет текста красный */
}
</style>
</head>
<body>
<h1>Заголовок первого уровня.</h1>
<p>Абзац для примера.</p>
</body>
</html>
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы.
