Задать вопрос
@Slyrax
css

Как сделать наследование только для дочернего элемента, исключая внуков и правнуков?

Здравствуйте!
Как видите в коде ниже, контейнер div является родительским элементом для Test1. В Test1 вложен Test2, а в Test2 вложен Test 3. Test 1 является для div дочерним элементом, а Test 2 "внуком" и Test 3 "правнуком". Я хочу чтобы красный цвет наследовал только дочерний параграф Test, исключая "внука" и"правнука", поэтому написал: div > p{,
но это не сработало, в чем моя ошибка?

<!DOCTYPE html>

<html>
	<head>
		<title>TEST</title>
		
		<style>
			div > p{
				color:red;
			}
		</style>
	</head>
	
	<body>
			<div id="z">
				<p>TEST1
					<p>TEST2
						<p>TEST3</p>
					</p>
				</p>
			</div>

	</body>
</html>
  • Вопрос задан
  • 220 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
@GreatRash
Ващет p в p нельзя вкладывать...
Ответ написан
Комментировать
Комментировать
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Из стандарта:
A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

Таким образом, с точки зрения браузера ваш html-код выглядит как:
<body>
    <div id="z">
        <p>TEST1 </p>
        <p>TEST2 </p>
        <p>TEST3 </p>
        </p>
        </p>
    </div>
</body>

Можете убедиться в этом открыв в браузере консоль разработки (F12) и посмотрев структуру страницы. Вполне логично, что все три параграфа являются для div'а потомками первого уровня и попадают под правило css.

Что касается наследования - CSS расшифровывается как каскадная таблица стилей и наследование в ней отменить нельзя, можно только перекрыть новым стилем, например так:
div > p {
    color: red;
}
div > p > * {
    color: black;
}
Ответ написан
Комментировать
Комментировать
L0k1
@L0k1
потому, что таблицы стилей, внимание, каскадные

div > p > p{ // и тут вернуть цвет в черный, например


ответил, не обратив внимание на тег )
товарищ GreatRash абсолютно прав
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы