First child css не работает: Почему не срабатывает :first-child?

Содержание

Почему не срабатывает :first-child? — Хабр Q&A

Почитав здесь вопрос и ответы, я понял свою ошибку. Хочу поделиться 🙂

У нас есть меню

<div>
		<div>
			<ul>
				<li><a href="#">Вызов курьера</a></li>
				<li><a href="#">Сотрудничество</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Видеоблог</a></li>
			</ul>
		</div>
	</div>

И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.

Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:

.top-line .menu ul li {
	float: left;
	padding: 6px 0px;
}

.top-line .menu ul li a {
	color: #474747;
	font-size: 0.857em;
	text-decoration: none;
	padding: 7px 15px;
	border-left: 1px solid #fff;
	border-right: 1px solid #c7c7c7;
}

.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }

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

.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }

И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.

На утро дошло 😀

У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!

Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.

И все заработало 🙂

Полный правильный код ниже:

<div>
		<div>
			<ul>
				<li><a href="#">Вызов курьера</a></li>
				<li><a href="#">Сотрудничество</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Видеоблог</a></li>
			</ul>
		</div>
	</div>

.top-line .menu ul li {
	float: left;
	padding: 6px 0px;
	border-left: 1px solid #fff;
	border-right: 1px solid #c7c7c7;
}

.top-line .menu ul li a {
	color: #474747;
	font-size: 0.857em;
	text-decoration: none;
	padding: 7px 15px;
}

.top-line .menu ul li:first-child { border-left: none; }
.top-line .menu ul li:last-child { border-right: none; }

Псевдокласс :first-child | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

элемент:first-child { … }

Значения

Нет.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div>
    <a href="1.html">uno</a>
    <a href="2.html">dos</a>
    <a href="3.html">tres</a>
    <a href="4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

Как правильно примнить :not(:first-child) li:before? — Хабр Q&A

Всем привет! не могу разобраться с псевдоелементами, прошу вашей помощи. итак:

ест секция:

<section>
		<div>
			<h3>Реализованные ПРОЕКТЫ</h3>
			<menu>
				<li><a href="#">Кухни</a></li>
				<li><a href="#">Раздвижные двери</a></li>
				<li><a href="#">Шкафы-купе</a></li>
				<li><a href="#">Офисная мебель</a></li>
				<li><a href="#">Стеновые панели</a></li>
			</menu>
			<div>
				<ul>
					<li><a href="#"><img src="images/kitchen1.jpg" alt="kitchen1"></a></li>
					<li><a href="#"><img src="images/kitchen2.jpg" alt="kitchen2"></a></li>
					<li><a href="#"><img src="images/kitchen3.jpg" alt="kitchen3"></a></li>
					<li><a href="#"><img src="images/kitchen4.jpg" alt="kitchen4"></a></li>
					<li><a href="#"><img src="images/kitchen5.jpg" alt="kitchen5"></a></li>
					<li><a href="#"><img src="images/kitchen6.jpg" alt="kitchen6"></a></li>
					<li><a href="#"><img src="images/kitchen7.jpg" alt="kitchen7"></a></li>
					<li><a href="#"><img src="images/kitchen8.jpg" alt="kitchen8"></a></li>
					<li><a href="#"><img src="images/kitchen9.jpg" alt="kitchen9"></a></li>
					<li><a href="#"><img src="images/kitchen10.jpg" alt="kitchen10"></a></li>
					<li><a href="#"><img src="images/kitchen11.jpg" alt="kitchen11"></a></li>
					<li><a href="#"><img src="images/kitchen12.jpg" alt="kitchen12"></a></li>
				</ul>
			</div>
		</div>
	</section>

и есть стили:

#project {
	width: 100%;
	background: top center url(../images/back_ground3.jpg) no-repeat;
	background-size: cover;
	height: auto;
	h3 {
		font-size: 45px;
		font-weight: normal;
		line-height: 1.3em;
		color: black;
		text-align: center;
		padding-top: 120px;
		text-transform: uppercase;
	}
	.kitchen {
		border-bottom: 2px solid #888888;
		padding-bottom: 100px;
		ul {
			text-align: justify;
			line-height: 0;
			padding: 0;
			&:after {
				width: 100%;
				height: 0;
				visibility: hidden;
				overflow: hidden;
				content: "";
				display: inline-block;
			}
			li {
				display: inline-block;
				text-align: left;
				padding: 5px 0;
				img {
					width: 100%;
				}
			}
		}
	}
	menu {
		text-align: justify;
		line-height: 0;
		padding: 0;
		margin-left: 30px;
		margin-right: 30px;
		&:after {
			width: 100%;
			height: 0;
			visibility: hidden;
			overflow: hidden;
			content: "";
			display: inline-block;
		}

		li {
			display: inline-block;
			text-align: left;
			padding: 5px 0;
			position: relative;
			a {
				display: block;
				font-size: 20px;
				line-height: 1.3em;
				color: #0d0d0d;
				text-transform: uppercase;
				&:hover {
					color: #c31e2f;
				}
			}
		}
		&:not(:first-child) li:before {
			top: 18px;
			left: -35px;
			content: "\\\\";
			position: absolute;
			font-size: 20px;
			width: 5px;
			height: 5px;
			color: #a6a6a6;
		}
	}
}

в итоге получается вот такого вида меню:

и теперь вопрос, как правильно применить &:not(:first-child) li:before что бы в меню перед пунктом «кухни» не было псевдоелемента //.

спасибо за внимание!

P.S. и вообще может есть какие то замечания именно по стилям?

Как я могу использовать селектор not:first-child?

Я div тег, содержащий несколько ul теги.

если я пытаюсь установить свойства CSS только для первого ul тег, и этот код работает:

div ul:first-child {
    background-color: #900;
}

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

div ul:not:first-child {
    background-color: #900;
}

кроме этого:

div ul:not(:first-child) {
    background-color: #900;
}

и так:

div ul:first-child:after {
    background-color: #900;
}

но безрезультатно. Как написать в CSS: «каждый элемент, кроме первого»?

6 ответов

одна из версий, которые вы опубликовали работает для всех современных браузеров (где CSS селекторы Уровень 3 are поддерживает):

div ul:not(:first-child) {
    background-color: #900;
}

Если вам нужно поддерживать устаревшие браузеры, или если вам мешает :not селектора ограничение (Она принимает только простой селектор в качестве аргумента), то вы можете использовать следующий метод:

определите правило, которое имеет больший объем, чем то, что вы намереваетесь а затем» отозвать » его условно, ограничив его объем тем, что вы намереваетесь:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

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

это решение CSS2 («any ul после очередного ul«) тоже работает, и поддерживается большим количеством браузеров.

div ul + ul {
  background-color: #900;
}

в отличие от :not и :nth-sibling, the селектор соседнего брата поддерживается IE7+.

если у вас JavaScript изменяет эти свойства после загрузки страницы, вы должны посмотреть на некоторые известные ошибки в IE7 и IE8 реализации этого. посмотреть этот ссылка.

для любой статической веб-страницы, это должно прекрасно работать.

131

автор: Alex Quinn

С :not не принимаются IE6~8, Я бы предложил вам следующее:

div ul:nth-child(n+2) {
    background-color: #900;
}

так что вы выбираете каждый ul в родительском элементе кроме первого.

обратитесь к Крису Койеру «полезно: nth-детские рецепты» статью nth-child примеры.

div li~li {
    color: red;
}

поддерживает IE7

not(:first-child) больше не работает. По крайней мере в последних версиях Chrome и Firefox.

вместо этого попробуйте следующее:

ul:not(:first-of-type) {}

автор: Vinny Troia

мне не повезло с некоторыми из вышеперечисленных,

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

ul:not(:first-of-type) {}

это сработало для меня, когда я пытался, чтобы первая кнопка, отображаемая на странице, не была произведена с помощью опции margin-left.

это был вариант, который я попробовал сначала, но он не работал

ul:not(:first-child)

Псевдокласс :first-child | CSS | WebReference

Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :first-child без указания селектора выберет все первые элементы внутри <article> и установит для них красный цвет текста. Здесь первыми идут <h2> и <time>, они и будут выбраны.

article :first-child { color: red; }

При добавлении селектора к :first-child сперва берётся первый элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это первый элемент и это элемент указанного типа. Здесь красным цветом будет выделен заголовок, поскольку первым идёт именно <h2>.

article h2:first-child { color: red; }

Если вместо h2 использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «первый элемент это <p>».

article p:first-child { color: red; }

Для выбора первого элемента определённого типа используйте псевдокласс :first-of-type.

Вместо :first-child допустимо использовать :nth-of-child(1).

Синтаксис

Селектор:first-child { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>first-child</title>
<style>
B:first-child {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
consequat</b>.</p>
</body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Меню</title>
<style>
.links {
background: #F6967D; /* Цвет фона */
}
.links a {
color: #FFFDEB; /* Цвет ссылок */
display: inline-block; /* Строчно-блочный элемент */
border-left: 1px solid #B62025; /* Параметры рамки слева */
padding: 5px 10px; /* Поля вокруг ссылок */
}
.links a:first-child {
border-left: none; /* Убираем первую линию слева */
}
</style>
</head>
<body>
<div>
<a href=»page/1.html»>uno</a>
<a href=»page/2.html»>dos</a>
<a href=»page/3.html»>tres</a>
<a href=»page/4.html»>cuatro</a>
</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

:first-child и :last-child | WebReference

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

Для демонстрации воспользуемся следующим списком.

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Все элементы <li> здесь равны между собой и имеют общего родителя <ul>. Таким образом, :first-child выберет первый пункт списка с текстом «Uno».

Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child. Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент <p>. Если первым элементом будет <p>, то к нему применяются стилевые правила; если первым оказывается другой элемент (не <p>), то стиль к нему не применяется.

Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.

<section>
  <p>Один</p>
  <div>Uno</div>
  <p>Два</p>
  <div>Dos</div>
  <p>Три</p>
  <div>Tres</div>
</section>

Следующий стиль сделает текст первого элемента внутри <section> зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.

section > :first-child { color: green; }

Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он <div>. Поскольку первым элементом внутри <section> у нас идёт <p>, то стиль применяться не будет.

section > div:first-child { color: green; }

Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно <p>.

section > p:first-child { color: green; }

Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент <div> идёт последним.

section > div:last-child { color: green; }

Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child.

Пример 1. :first-child для списка

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>:first-child</title>
<style>
ul {
background: #86328c; /* Цвет фона */
padding: 0; /* Обнуляем */
}
li {
display: inline-block; /* Выстраиваем по горизонтали */
color: #eedfac; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
border-left: 1px solid #f190ac; /* Линия слева */
}
li:first-child { /* Для первого элемента */
border-left: none; /* убираем линию */
}
</style>
</head>
<body>
<ul>
<li>Uno</li><li>Dos</li><li>Tres</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Список с вертикальными линиями

Аналогичный результат достигается и с помощью :last-child, только вместо линии слева надо сделать её справа через свойство border-right.

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

Рис. 2. Границы в таблице

К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).

Пример 2. Использование :last-child

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>:first-child</title>
<style>
table {
background: #f7f7f7; /* Цвет фона */
width: 100%; /* Ширина таблицы */
border-spacing: 0; /* Расстояние между ячеек */
border: 1px solid #ccc; /* Параметры рамки */
}
th, td {
padding: 10px; /* Поля в ячейках */
}
th {
background: #e9e9e9; /* Цвет фона заголовка */
}
th, td {
border-left: 1px solid #ccc;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
}
th:first-child, td:first-child { border-left: none; }
th:last-child, td:last-child { border-right: none; }
tr:last-child td { border-bottom: none; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Значение</th>
<th>Значение по умолчанию</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td>top</td>
<td>Да</td>
<td>Располагает заголовок по верхнему краю таблицы.</td>
</tr>
<tr>
<td>bottom</td>
<td>Нет</td>
<td>Заголовок располагается под таблицей.</td>
</tr>
</tbody>
</table>
</body>
</html>

Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Псевдокласс :first-child | CSS справочник

CSS селекторы

Значение и применение

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

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

Поддержка браузерами

CSS cинтаксис:

:first-child {
блок объявлений;
}

Версия CSS

CSS2

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

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

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

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <h3> и <li> являются первыми дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :first-child.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
h3:first-child { /* выбираем каждый элемент <h3>, который является первым дочерним элементом своего родителя */
color: blue; /* устанавливаем цвет текста */
}
li:first-child{ /* выбираем каждый элемент <li>, который является первым дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса :first-child мы стилизовали элементы <h3> и <li>, которые являются первыми дочерними элементами своих родителей.

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

Пример использования псевдокласса :first-child.CSS селекторы

Почему этот селектор CSS: first-child не работает?

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

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

css -: псевдокласс first-child не работает

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

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Загрузка…

css — nth-child не отвечает на класс

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

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Загрузка…

html — Почему не работает селектор CSS section: only-child?

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

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Загрузка…

About Me

Dashy

First child css не работает: Почему не срабатывает :first-child? — Хабр Q&A

Почему не срабатывает :first-child? — Хабр Q&A

Псевдокласс :first-child | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Как правильно примнить :not(:first-child) li:before? — Хабр Q&A

Как я могу использовать селектор not:first-child?

6 ответов

Псевдокласс :first-child | CSS | WebReference

Синтаксис

Обозначения

Пример

Спецификация

Браузеры

Автор и редакторы

:first-child и :last-child | WebReference

Автор и редакторы

Псевдокласс :first-child | CSS справочник

Значение и применение

Поддержка браузерами

CSS cинтаксис:

Версия CSS

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

Почему этот селектор CSS: first-child не работает?

css -: псевдокласс first-child не работает

css — nth-child не отвечает на класс

html — Почему не работает селектор CSS section: only-child?

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

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30