Как обращаться к дочернему элементу в css?

Пользователь

от ottilie.farrell , в категории: HTML/CSS , год назад

Как обращаться к дочернему элементу в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dan_farrell , год назад

@ottilie.farrell 

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

1
2
3
родительский_элемент > дочерний_элемент {
    /* стили для дочернего элемента */
}


Например, если у вас есть следующий HTML-код:

1
2
3
4
<div class="parent">
    <h1>Заголовок</h1>
    <p>Текст</p>
</div>


Вы можете написать следующий CSS-код, чтобы применить стили только к дочернему элементу <p>:

1
2
3
.parent > p {
    /* стили для элемента <p> */
}


Также можно использовать другие комбинаторы, такие как "space" и "+", для обращения к элементам, находящимся внутри других элементов, но не являющимися непосредственными дочерними элементами.

Пользователь

от kenya , 4 месяца назад

@ottilie.farrell 

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


1 2 3


.parent_class > .child_class { /* стили для дочернего элемента с классом .child_class внутри элемента с классом .parent_class */ }


#parent_id > .child_class { /* стили для дочернего элемента с классом .child_class внутри элемента с идентификатором #parent_id */ }


Например, если у вас есть HTML-код:


1 2 3 4


Вы можете использовать следующий CSS-код, чтобы применить стили только к дочернему элементу с классом ".child":


1


.parent > .child { /* стили для элемента с классом ".child" */ }