Почему IE не отображает :nth-child(2), а Chrome отображает?

Question

sorry_i_noob @sorry_i_noob

CSS

Почему IE не отображает :nth-child(2), а Chrome отображает?

Здравствуйте. Есть такой код.
HTML:

<div class="parent">
	<div class="col-1">
		<div class="elem">
			col-1 Текст 1
		</div>
		<div class="elem">
			col-1 Текст 2
		</div>
		<div class="elem">
			col-1 Текст 3
		</div>
		<div class="elem">
			col-1 Текст 4
		</div>
		<div class="elem">
			col-1 Текст 5
		</div>
	</div>
</div>

CSS:

.elem {
	border: 1px solid black;
	background-color: green;
}

.col-1 :nth-child(2) {
	background-color: #fff;
}

Вот результат в Chrome:

Вот результат в IE:

При том, что на developer.mozilla.org написано, что это свойство поддерживается в IE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:...

Почему же тогда не отображается?

Вопрос задан более трёх лет назад
94 просмотра

9 комментариев

Подписаться 1 Простой 9 комментариев

Lynn «Кофеман» @Lynn

Версия ie какая?

Написано более трёх лет назад
RAX7 @RAX7

.col-1 :nth-child(2) // <- пробел убери перед :

Написано более трёх лет назад
sorry_i_noob @sorry_i_noob Автор вопроса

Алексей Тен,

Написано более трёх лет назад
sorry_i_noob @sorry_i_noob Автор вопроса

RAX7, если убрать, то свойство применится не к дочерним элементам, а к самому ".col-1". А мне это не надо.

Написано более трёх лет назад
RAX7 @RAX7
sorry_i_noob,
.col-1:nth-child(2) .elem { background-color: #fff; }
Написано более трёх лет назад
Антон Усачев @rockfeeler
sorry_i_noob, тогда в чем проблема написать так:
.col-1 .elem:nth-child(2) { background-color: white; }
Написано более трёх лет назад
Lynn «Кофеман» @Lynn

А doctype написан?

Написано более трёх лет назад

sorry_i_noob @sorry_i_noob Автор вопроса

Алексей Тен,

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>111</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
	<div class="col-1">
		<div class="elem">
			col-1 Текст 1
		</div>
		<div class="elem">
			col-1 Текст 2
		</div>
		<div class="elem">
			col-1 Текст 3
		</div>
		<div class="elem">
			col-1 Текст 4
		</div>
		<div class="elem">
			col-1 Текст 5
		</div>
	</div>
</div>
</body>
</html>

Написано более трёх лет назад

Антон Усачев @rockfeeler

sorry_i_noob, странно. На скринах title="test", а в коде – "111". Ты точно тот код смотришь в своем браузере? Потому что я проверил у себя на той же версии Осла, и у меня все работает нормально.

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Как сверстать кастомную пунктирную обводку у блока?
- 1 подписчик
- вчера
- 121 просмотр
2

ответа
CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- 13 нояб.
- 176 просмотров
1

ответ
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 142 просмотра
1

ответ
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 164 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 227 просмотров
1

ответ
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 183 просмотра
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 143 просмотра
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 106 просмотров
1

ответ
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 128 просмотров
2

ответа
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 188 просмотров
2

ответа
Показать ещё Загружается…

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

.col-1 :nth-child(2) // <- пробел убери перед :
RAX7, если убрать, то свойство применится не к дочерним элементам, а к самому ".col-1". А мне это не надо.
sorry_i_noob,
.col-1:nth-child(2) .elem { background-color: #fff; }
sorry_i_noob, тогда в чем проблема написать так:
.col-1 .elem:nth-child(2) { background-color: white; }
Алексей Тен,

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>111</title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="col-1"> <div class="elem"> col-1 Текст 1 </div> <div class="elem"> col-1 Текст 2 </div> <div class="elem"> col-1 Текст 3 </div> <div class="elem"> col-1 Текст 4 </div> <div class="elem"> col-1 Текст 5 </div> </div> </div> </body> </html>
sorry_i_noob, странно. На скринах title="test", а в коде – "111". Ты точно тот код смотришь в своем браузере? Потому что я проверил у себя на той же версии Осла, и у меня все работает нормально.

Answer 1 · 2019-07-23 14:56:50

У меня был включен режим совместимости в IE. Я отключил его, и все стало корректно отображаться. Всем спасибо за попытки помочь.

Почему IE не отображает :nth-child(2), а Chrome отображает?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт