». В таких случаях « :имеет() ” используется псевдокласс родительского селектора.
В этом посте будет описано:
- Как стилизовать родительский элемент, указав его дочерние элементы?
- Как выделить все дочерние элементы?
- Как выбрать все прямые дочерние элементы?
Как стилизовать родительский элемент, указав его дочерние элементы?
Сначала создайте файл HTML с двумя элементами «div» следующим образом:
- Добавьте два ' <дел> 'элементы одного класса' родительский раздел ».
- Первый содержит два « элементы.
- Второй элемент «» содержит « ' и ' ”: < див класс знак равно 'родительский раздел' >
< п > Привет < / п >
< п > Мир < / п >
< / див >
< див класс знак равно 'родительский раздел' >
< h1 > Привет < / h1 >
< п > У меня есть тег 'h1' < / п >
< / див >Если требуется стилизовать элемент «
», имеющий « », то мы можем настроить стиль родительского элемента, удерживая дочерний. Для этой цели мы можем использовать « :имеет() селектор.
Из обоих элементов «
» выберите тот, который содержит элемент «», используя « .имя-класса: имеет (дочернее имя) ”:
.parent-div : имеет ( h1 ) {
фоновый цвет : #103e6d ;
цвет : морская ракушка ;
ширина : 150 пикселей ;
высота : 150 пикселей ;
радиус границы : 50% ;
выравнивание текста : центр ;
}Здесь мы применили следующие свойства CSS к родительскому элементу:
- “ фоновый цвет ” используется для указания цвета фона элемента.
- “ цвет ” определяет цвет текста элемента.
- “ ширина ” используется для определения ширины элемента.
- “ высота ” указывает высоту элемента.
- “ радиус границы ” используется для установки закругленных углов элемента.
- “ выравнивание текста ” определяет выравнивание текста.
Вывод
Как выделить все дочерние элементы?
Чтобы выбрать дочерний элемент с помощью родительского селектора, выполните приведенный пример.
Пример
Для создания HTML-страницы выполните следующие шаги:
- Добавьте элемент div, содержащий два « ” теги и “ <дел> ” тег, имеющий класс “ дочерний раздел ».
- Ребенок ' див » содержит элемент «
»:
< п > Привет < / п >
< п > Мир < / п >
< див класс знак равно 'ребенок-див' >
< п > я ребенок див < / п >
< / див >
< / див >Мы можем выбрать дочерние элементы через родительский « <дел> ' класс. Это позволит не только выбрать его прямое « п », но также выбирает вложенные « п элементы:
.parent-div п {
фоновый цвет : #7F167F ;
семейство шрифтов : скоропись ;
размер шрифта : 25 пикселей ;
выравнивание текста : центр ;
цвет : белый дым ;
}Вывод
Как выбрать все прямые дочерние элементы?
Чтобы выбрать прямого потомка родительского div, мы можем использовать « > ' условное обозначение. Это поможет выбрать все элементы «p», которые являются прямыми дочерними элементами «родителя». <дел> ». Например, мы применили следующие свойства CSS:
.parent-div > п {
фоновый цвет : #7F167F ;
семейство шрифтов : скоропись ;
размер шрифта : 30 пикселей ;
выравнивание текста : центр ;
цвет : белый дым ;
}“ семейство шрифтов ” указывает шрифт выбранного элемента и “ размер шрифта ” используется для определения размера шрифта:
Вывод
Мы обсудили родительские селекторы CSS в HTML и CSS.
Заключение
В CSS « :имеет() селектор используется как псевдокласс родительского селектора. Он особенно используется для выбора родительских элементов. Например, ' .parent-div: имеет (h1) ” выбирает родительский элемент, имеющий “ элементы. Чтобы выбрать дочерний элемент родительского элемента, используйте « .parent-div p ». Оператор условия также можно использовать для выбора всех прямых дочерних элементов. В этой статье объясняется родительский селектор CSS с примерами.