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

@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" и "+", для обращения к элементам, находящимся внутри других элементов, но не являющимися непосредственными дочерними элементами.

@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" */ }