Css parent element: Is there a CSS parent selector?

Leave a Comment / Css / By /

Есть ли родительский селектор CSS?

html

4 недели назад

от Sharqa Hameed

Селекторы в CSS — это правила, имеющие шаблон элементов. На основе этих паттернов элементы выбираются браузером и настраиваются в стилях. В некоторых случаях необходимо стилизовать элементы, имеющие определенный родительский элемент. Например, если есть несколько элементов «

», назначенных одному и тому же классу, и требуется стилизовать «div», имеющий тег «

». В таких случаях «

:has() ” используется псевдокласс родительского селектора.

Этот пост будет описывать:

  • Как стилизовать родительский элемент, указав его дочерние элементы?
  • Как выбрать все дочерние элементы?
  • Как выбрать все прямые дочерние элементы?

Как стилизовать родительский элемент, указав его дочерние элементы?

Сначала создайте файл HTML с двумя элементами «div» следующим образом:

  • Добавьте два «
    » элементы с тем же классом « parent-div ».
  • Первый содержит два элемента «

    ».

  • Второй элемент «
    » содержит «

    » и «

    »:

Привет

мир

Привет

У меня есть тег «h2»

Если требуется стилизовать элемент «

», имеющий элемент «

», то мы можем настроить стиль родительского элемента, удерживая дочерний элемент. Для этой цели мы можем использовать селектор «: has() ».

Из обоих элементов «

» выберите тот, который содержит элемент «

», используя «

.class-name:has(child-name) »:

.parent-div:has (h2) {

background-color: #103e6d;

цвет: морская ракушка;

ширина: 150 пикселей;

высота: 150 пикселей;

радиус границы: 50%;

выравнивание текста: по центру;

}

Здесь мы применили следующие свойства CSS к родительскому элементу:

  • « background-color » используется для указания цвета фона элемента.
  • « color » определяет цвет текста элемента.
  • « ширина » используется для определения ширины элемента.
  • « height » определяет высоту элемента.
  • Свойство « border-radius » используется для установки закругленных углов элемента.
  • « text-align » определяет выравнивание текста.

Вывод

Как выбрать все дочерние элементы?

Чтобы выбрать дочерний элемент с помощью родительского селектора, выполните приведенный пример.

Пример

Выполните следующие шаги для создания HTML-страницы:

  • Добавьте элемент div, содержащий два тега «

    » и тег «
    », имеющий класс « child-div ». .
  • Дочерний элемент « div » содержит элемент «

    »:

Привет

мир

я дочерний элемент

Мы можем выбрать дочерние элементы через родительский класс «

». Это не только выберет его прямые элементы « p », но также выберет вложенные элементы « p »:

.parent-div p {

background-color: #7F167F;

семейство шрифтов: скоропись;

размер шрифта: 25 пикселей;

выравнивание текста: по центру;

цвет: бело-дымчатый;

}

Выход

Как выбрать все прямые дочерние элементы?

Чтобы выбрать прямой дочерний элемент родительского элемента div, мы можем использовать символ « > ». Это поможет выбрать все элементы «p», которые являются прямыми дочерними элементами родительского элемента «

». Например, мы применили следующие свойства CSS:

.parent-div>p {

background-color: #7F167F;

семейство шрифтов: скоропись;

размер шрифта: 30 пикселей;

выравнивание текста: по центру;

цвет: бело-дымчатый;

}

« font-family » указывает шрифт выбранного элемента, а « font-size » используется для определения размера шрифта:

Output

3 о родительских селекторах CSS в HTML и CSS.

Заключение

В CSS селектор « :has() » используется как псевдокласс родительского селектора. Он особенно используется для выбора родительских элементов. Например, « .parent-div:has(h2) «выбирает родительский элемент, содержащий элементы »

«. Чтобы выбрать дочерний элемент родительского элемента, используйте « .parent-div p ». Оператор условия также можно использовать для выбора всех прямых дочерних элементов. В этой статье объясняется родительский селектор CSS с примерами.

Об авторе

Sharqa Hameed

Я энтузиаст Linux, я люблю читать каждый блог Linux в Интернете. У меня есть степень магистра в области компьютерных наук, и я увлечен обучением и преподаванием.

Посмотреть все сообщения

Найти родительский элемент с CSS

CSS ‘:

has' добавляет пользовательскую логику для поиска элементов на основе других селекторов (вместо собственного селектора). Photo by Vinicius «amnx» Amano на Unsplash

Должен признать, что одной из самых мощных машин является движок CSS , но иногда сложно делать определенные вещи, используя только CSS, даже просто изменить некоторые цвета. Например, если я попрошу вас найти родительский элемент из дочернего элемента в CSS, обычно вы застрянете.

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

JavaScript

Я разработчик JavaScript, поэтому в прошлом, когда возникают эти проблемы, я просто пишу несколько строк кода JS, например:

 Document.getElementById('root')

Иногда более сложная версия, но более или менее я могу найти элемент, даже если он находится далеко-далеко в одной из ветвей DOM. Здесь нет ничего нового, мы занимаемся этим почти два десятилетия назад. Но, честно говоря, JavaScript тяжеловат; если мне не нужно этого делать, я стараюсь не делать этого в JavaScript. Да, я разработчик JavaScript, но сейчас я использую CSS в качестве своего первого инструмента для решения проблем пользовательского интерфейса просто потому, что он дешевле.

CSS

CSS 9Верьте или нет, 0256 добавляет новые функции каждый день. Причина, по которой мы чувствуем, что он быстро меняется, заключается в том, что никто не отслеживает спецификацию CSS, не говоря уже обо всех этих совместимости браузеров. Одна из особенностей, которая, кажется, открывает перед нами дверь в отношении родительского узла, называется :has . Можете посмотреть видео, если еще не знаете. Я подожду, пока ты не вернешься.

Вместо прямого поиска элемента мы находим его, спрашивая, имеет ли он другой селектор или содержит его. Давайте рассмотрим селектор:

 a img {}

Приведенный выше селектор запрашивает img внутри a . Это просто, но именно поэтому мы не можем найти родителя, потому что нас не интересует img , ну вроде того, что мы действительно хотим сделать, это:

 a:has(img) {}

Ааа, если a содержит img , то это a , который мы хотим найти. Вот и все? Вы могли бы сказать. Да, это действительно делает невозможное возможным.

См. спецификации для :has , https://developer.mozilla.org/en-US/docs/Web/CSS/:has

body:has()

Много раз, когда я делаю веб-сайт, я хочу чтобы изменить стиль body , когда всплывает модальное окно. Теперь мне кажется, что мне нужно сделать только следующее:

 body:has(.Modal) {} // если модальное внутри 
 body:has(+ .Modal) {} // если модальное родственное

Одна строка кода? Давайте попробуем сделать это с помощью JavaScript, удачи. Более того, если вы можете интегрировать свою версию JavaScript с менее чем пятью строками кода в свою структуру внешнего интерфейса.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *