wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

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

alexxlab
No Comments

Содержание

как использовать CSS селектор nth-child

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом nth-child.

N значит nth-child

В CSS есть множество мощных селекторов, с помощью которых можно находить элементы на странице и применять к ним стили.
Из-за гибкости выражения для нахождения элементов по шаблону (an+b) псевдокласс nth-child, возможно, является самым мощным. Более подробно данный псевдокласс был разобран в видеоуроке. В этом уроке мы узнаем, когда лучше использовать nth-child, а когда лучше обойтись обычным классом.

Когда нужно использовать nth-child?

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

Во-первых, все селекторы типа nth-child поддерживаются только в IE9 и выше (исключение :first-child). То есть первым делом необходимо определиться с диапазоном браузеров, с которыми вы будете работать. Если вам придется работать с IE8, вы можете использовать обычные классы или :first-child.

Совет 1: если вы поддерживаете IE8, используйте :first-child

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Не нужно добавлять рамку справа и затем удалять ее на последнем элементе. Лучше добавьте рамку слева и удалите ее у первого элемента.

.site-nav li {
border-left: 2px solid grey;
}
.site-nav li:first-child {
border: 0;
}

.site-nav li {

  border-left: 2px solid grey;

}

.site-nav li:first-child {

  border: 0;

}

Так же можно поступить и для верхних и нижних рамок. Если же вам посчастливилось не поддерживать IE8, читайте дальше…

Совет 2: используйте вместо классов :first-child и :last-child

Если вы создаете или используете готовую сетку, и вам нужно сделать что-то с первой и последней ячейками в ряду, воспользуйтесь псевдоклассами :first-child и :last-child вместо классов типа .first и .last в HTML.

Так ваш HTML код будет выглядеть чище, и вам не придется слишком много думать во время разработки макета. Иногда макеты бывают очень сложными. Чем меньше вам нужно думать над ним, тем лучше.

Совет 3: используйте nth-child для альтернативных стилей

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В таких случаях я использую :nth-child(odd) и :nth-child(even). Чтобы не засорять код, пропишите первое состояние без nth-child, после чего уже используйте nth-child с большей специфичностью для альтернативных стилей.

/* вот так */
.data-table tr {
background: white;
}
.data-table tr:nth-child(even) {
background: lightgrey;
}

/* а не так */
.data-table tr:nth-child(odd) {
background: white;
}
.data-table tr:nth-child(even) {
background: lightgrey;
}

/* вот так */

.data-table tr {

  background: white;

}

.data-table tr:nth-child(even) {

  background: lightgrey;

}

 

/* а не так */

.data-table tr:nth-child(odd) {

  background: white;

}

.data-table tr:nth-child(even) {

  background: lightgrey;

}

Совет 4: избегайте странных и сложных выражений с nth-child

Для более сложных выборок на странице я предпочитаю прописывать классы напрямую в HTML, а не работать с запутанными выражениями nth-child.

Выражения типа li:nth-child(-n+3) или li:nth-child(5n+1):not(nth-child(3n-1)) слишком сложны для понимания. Понятия не имею, что они значат, но они работают!

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

Совет 5: используйте nth-child, когда не можете контролировать HTML

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

При создании шаблона для сайта на CMS у вас будет возможность контролировать HTML структуру и создавать классы и атрибуты. Однако иногда в ваших шаблонах будут такие места, куда будет вставляться контент из текстовых полей или областей из самой CMS. Классический пример – WP the_content – один большой кусок HTML, который вы либо плохо контролируете, либо не контролируете вообще.

В этой ситуации вам помогут :first-child, :last-child и :nth-child. Вот и все, 5 советов по тому, как использовать или не использовать самые мощные и гибкие CSS селекторы.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как работает CSS-селектор nth-child | CSS-Tricks по-русски

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

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


ul li:nth-child(3n+3) {
	color: #ccc;
}

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

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

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


ul li:nth-child(5) {
	color : #ccc;
}

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


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

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


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

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


(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.

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


(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.

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


-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия

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

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

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

Ну и напоследок

Вы можете поиграть с различными выражениями для селектора на страничке с примером.

CSS3 | Псевдоклассы дочерних элементов

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

Последнее обновление: 21.04.2016

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

  • :first-child: представляет элемент, который является первым дочерним элементом

  • :last-child: представляет элемент, который является последним дочерним элементом

  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере

  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

  • :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Используем псевдокласс first-child для выбора первых ссылок в блоках:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:first-child{
			
				color: red;
			}
        </style>
    </head>
    <body>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
		</div>
		<h4>Смартфоны</h4>
		<div>
			<p>Топ-смартфоны 2016</p>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
    </body>
</html>

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

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

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

Псевдокласс last-child

Используем псевдокласс last-child:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:last-child{
			
				color: blue;
			}
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<div>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
			<p>Данные за 2016</p>
		</div>
    </body>
</html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

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

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		p:only-child{
			color:red;
		}
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<div>
			<p>Текст1</p>
		</div>
		<div>
			<p>Текст2</p>
			<p>Текст3</p>
		</div>
		<div>
			<p>Текст4</p>
		</div>
	</body>
</html>

Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.

Псевдокласс only-of-type

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом
элементов других типов в этом же контейнере может быть сколько угодно.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		span:only-of-type{
		
			color: green;	/* зеленый цвет */
		}
		p:only-of-type{
		
			color: red;	/* красный цвет */
		}
		div:only-of-type{
		
			color: blue;	/* синий цвет */
		}
        </style>
    </head>
    <body>
		<div>
			Header
		</div>
		<p>Единственный параграф и <span>элемент спан</span></p>
		<div>
			Footer
		</div>
	</body>
</html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть
только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.

Псевдокласс nth-child

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

Например, стилизуем четные и нечетные строки таблицы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			tr:nth-child(odd) { background-color: #bbb; }
			tr:nth-child(even) { background-color: #fff; }
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<table>
			<tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr>
			<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
			<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
			<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
			<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
			<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
			<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
			<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
		</table>
    </body>
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:

tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение «even»:

tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:

tr:nth-child(2n+1) { background-color: #bbb; }

Здесь стиль применяется к каждой второй нечетной строке.

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

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.

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

tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:


tr:nth-last-child(2) { 
	background-color: #bbb; /* 2 строка с конца, то есть предпоследняя  */
}
tr:nth-last-child(2n+1) {  
	background-color: #eee; /* нечетные строки, начиная с конца  */
}

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:


tr:nth-of-type(2) { 
	background-color: #bbb;
}

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:


tr:nth-last-of-type(2n) { 
	background-color: #bbb;
}

Разница между nth-child и nth-of-type — Как создать сайт

В чём разница между псевдоклассами :nth-child и :nth-of-type

При изучении псевдоклассов CSS, чаще всего не понятна разница между :nth-child и :nth-of-type, давайте проясним её.

Допустим нам нужно в HTML-документе, выбрать второй абзац статьи и сделать его фон серым:


<style>
 CSS-код...
</style>
<div>
 <p>
  Первый абзац...</p>
 <p>
  Второй абзац...</p>
</div>

Если в CSS-код мы разместим:
#content :nth-child(2) { background: gray; } или
#content :nth-of-type(2) { background: gray; },
то серым цветом выделится «Второй абзац…». Однако, если в наш HTML-документ добавить заголовок статьи h2:


<style>
 CSS-код...
</style>
<div>
 <h2>Заголовок статьи 1</h2>
 <p>
  Первый абзац...</p>
 <p>
  Второй абзац...</p>
</div>

То при использовании #content :nth-child(2) { background: gray; }, серым цветом окрасится «Первый абзац…» (поскольку он является вторым элементом потомком в родителе #content).

А при использовании #content :nth-of-type(2) { background: gray; }, серым цветом окрасится «Второй абзац…», (поскольку он является вторым абзацем (типом) в родителе #content).

Если добавить еще один заголовок h2:


<style>
 CSS-код...
</style>
<div>
 <h2>Заголовок статьи 1</h2>
 <h2>Заголовок статьи 2</h2>
 <p>
  Первый абзац...</p>
 <p>
  Второй абзац...</p>
</div>

То при применении псевдокласса #content :nth-child(2) { background: gray; }, серым цветом окрасится «Заголовок статьи 2», а при применении псевдокласса #content :nth-of-type(2) { background: gray; }, серым цветом окрасятся «Заголовок статьи 2» и «Второй абзац…».

Вот примерно такие моменты и разнят данные псевдоклассы, и даже если после этих примеров вам немного не понятно, то не переживайте. Ежедневно практикуясь в языке CSS, вы рано или поздно всё поймёте.

Спасибо за внимание 🙂

Следующий урок, расскажет о псевдоэлементах в CSS.

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 26 октября 2014

Навигация по записям

css nth дочерний селектор для детей 2, 3, 6, 7, 10, 11, 14, 15 и т. Д.

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

html — получить n-й дочерний номер элемента в чистом JavaScript

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

селекторов css — CSS как использовать псевдокласс: не с: nth-child

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

  2. Авторизоваться
    зарегистрироваться

  3. текущее сообщество

.

No related posts.

Share :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *