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

Как выбрать элемент <li>, который является прямым родителем элемента привязки?

В примере мой CSS будет примерно таким:

li < a.active {
    property: value;
}

Очевидно, что есть способы сделать это с помощью JavaScript, но я надеюсь, что существует какое-то обходное решение, существующее на уровне CSS 2-го уровня.

Меню, которое я пытаюсь создать, вытесняется CMS, поэтому я не могу переместить активный элемент в элемент <li>... (если я не использую модуль создания меню, который я бы предпочел не делать).

Любые идеи?

2833
18 июня '09 в 22:59
источник поделиться
36 ответов
  • 1
  • 2

В настоящее время нет способа выбрать родителя элемента в CSS.

Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:

Тем временем вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.


Рабочий вариант селектора уровня 4 включает в себя псевдокласс :has() который работает так же, как и реализация jQuery. По состоянию на 2019 год это все еще не поддерживается ни одним браузером.

Используя :has() исходный вопрос можно решить с помощью этого:

li:has(> a.active) { /* styles to apply to the li tag */ }
2274
18 июня '09 в 23:16
источник

Связанные вопросы


Похожие вопросы

Я не думаю, что вы можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active, не было бы легче перенести этот класс на li (вместо a)? Таким образом, вы можете получить доступ только к li и a только через css.

143
18 июня '09 в 23:08
источник

Вы можете использовать script.

*! > input[type=text] { background: #000; }

Это приведет к выбору любого родителя текстового ввода. Но подождите, там еще гораздо больше. Если вы хотите, вы можете выбрать указанного родителя:

.input-wrap! > input[type=text] { background: #000; }

или выберите его, когда он активен:

.input-wrap! > input[type=text]:focus { background: #000; }

Посмотрите этот HTML-код:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

вы можете выбрать span.help, когда активен input и покажите его:

.input-wrap! .help > input[type=text]:focus { display: block; }

Есть еще много возможностей; просто проверьте документацию плагина.

BTW, он работает в IE.

114
13 авг. '11 в 13:13
источник

Как уже упоминалось в парах других, нет способа создать элемент parent/s, используя только CSS, но следующее работает с jQuery:

$("a.active").parents('li').css("property", "value");
95
14 дек. '09 в 17:51
источник

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

body:contains-selector(a.active) { background: red; }

Затем браузеру придется подождать, пока он не загрузится и не будет разбираться все до </body>, чтобы определить, должна ли страница быть красной или нет.

В этой статье Почему у нас нет родительского селектора подробно объясняется.

60
21 янв. '14 в 11:43
источник

в css2 нет способа сделать это. вы можете добавить класс в li и указать a

li.active > a {
    property: value;
}
50
18 июня '09 в 23:06
источник

да: :has()

поддержка браузера: none

34
20 янв. '18 в 23:22
источник

Попробуйте переключить отображение a на block, а затем используйте любой желаемый стиль. Элемент a заполнит элемент li, и вы сможете изменить его, как хотите. Не забудьте установить дополнение li на 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}
33
23 нояб. '11 в 12:03
источник

CSS-селектор " General Sibling Combinator " может быть использован для того, что вы хотите:

E ~ F {
    property: value;
}

Это соответствует любому элементу F, которому предшествует элемент E

32
30 июня '11 в 17:00
источник

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

Можете ли вы объяснить больше о том, чего вы пытаетесь достичь? Может быть другой способ решения, например. переместите стиль в li, затем отключите его в a.active или через дочерний селектор.

26
18 июня '09 в 23:06
источник

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

25
18 июня '09 в 23:09
источник

Я знаю, что OP ищет решение для CSS, но его легко достичь с помощью jQuery. В моем случае мне нужно было найти тег <ul> для тега <span>, содержащегося в дочернем <li>. jQuery имеет селектор :has, поэтому он может идентифицировать родителя с помощью его дочерних элементов:

$("ul:has(#someId)")

выберет элемент ul, у которого есть дочерний элемент с id someId. Или, чтобы ответить на исходный вопрос, что-то вроде следующего должно сделать трюк (непроверенный):

$("li:has(.active)")
23
17 мая '13 в 1:04
источник

Это наиболее обсуждаемый аспект спецификации Selectors Level 4. С помощью этого селектора будет возможность стилизовать элемент в соответствии с его дочерним элементом, используя восклицательный знак после данного селектора (!).

Например:

body! a:hover{
   background: red;
}

будет устанавливать красный цвет фона, если пользователь наводится на любой якорь.

Но мы должны ждать реализации браузеров: (

20
05 мая '15 в 21:24
источник

Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении. Вот так:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

Таким образом вы можете изменить стиль в нескольких внутренних тегах на основе опрокидывания родительского элемента.

19
13 февр. '12 в 14:22
источник

Псевдоэлемент :focus-within позволяет выбирать родителя, если у потомка есть фокус.

Элемент может быть сфокусирован, если у него есть атрибут tabindex.

Поддержка браузера для фокусировки внутри

TabIndex

пример

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>
18
25 сент. '17 в 16:55
источник

Кто-нибудь предложил что-то подобное? Просто идея для горизонтального меню...

часть HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

часть CSS

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Обновленная демонстрация и остальная часть кода

Другой пример, как использовать его с текстовыми вводами - выберите родительский набор полей

13
27 окт. '15 в 20:55
источник

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

Здесь много технических объяснений.

Джонатан Снук объясняет, как оценивается CSS.

Крис Койер о беседах родительского селектора.

Гарри Робертс снова пишет эффективные селекторы CSS.

Но у Николь Салливан есть некоторые интересные факты о положительных тенденциях.

Эти люди все высшего класса в области разработки переднего плана.

13
21 марта '14 в 15:58
источник

Есть плагин, который расширяет CSS, чтобы включать некоторые нестандартные функции, которые действительно могут помочь при разработке сайтов. Это называется EQCSS.

EQCSS добавляет родительский селектор. Работает во всех браузерах IE8 и выше. Здесь формат:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Итак, здесь мы открыли запрос элемента для каждого элемента a.active, и для стилей внутри этого запроса такие вещи, как $parent имеют смысл, потому что есть точка отсчета. Браузер может найти родителя, потому что он очень похож на parentNode в JavaScript.

Здесь демонстрация $parent и другая демонстрация $parent которая работает в IE8, а также снимок экрана на случай, если у вас нет IE8 для тестирования.

EQCSS также включает мета-селекторы $prev для элемента перед выбранным элементом, $this только для тех элементов, которые соответствуют запросу элемента, и многое другое.

12
07 апр. '16 в 20:52
источник

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

Допустим, вы тоже можете сделать что-то подобное.

a.active h1 {color:blue;}
a.active p {color: green;}

JQuery

$("a.active").parents('li').css("property", "value"); 

Если вы хотите достичь этого, используя jQuery, здесь приведена ссылка для родительский селектор jQuery

11
14 окт. '15 в 13:08
источник

W3C исключил такой селектор из-за огромного влияния производительности на браузер.

9
16 авг. '11 в 7:43
источник

Короткий ответ НЕТ, на данном этапе в CSS нет parent selector, но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});

или более короткий путь, если вы используете jQuery в своем приложении:

$('a.active').parents('li').css('color', 'red'); //your property: value;
8
16 июня '17 в 21:06
источник

Сейчас 2019 год, и в последнем проекте CSS-модуля вложения есть что-то вроде этого. Представляем @nest at-rules.

3.2. Правило гнездования: @nest

Хотя прямое вложение выглядит красиво, оно несколько хрупкое. Некоторые допустимые вложенные селекторы, такие как .foo &, запрещены, и редактирование селектора определенными способами может неожиданно сделать правило недействительным. Кроме того, некоторые люди считают, что гнездование сложно отличить визуально от окружающих деклараций.

Чтобы помочь во всех этих проблемах, эта спецификация определяет правило @nest, которое накладывает меньше ограничений на то, как правильно вкладывать правила стиля. Его синтаксис:

@nest = @nest <selector> { <declaration-list> }

Правило @nest функционирует идентично правилу стиля: оно начинается с селектора и содержит объявления, которые применяются к элементам, которым соответствует селектор. Единственное отличие состоит в том, что селектор, используемый в правиле @nest, должен содержать гнездо, что означает, что он содержит где-то вложенный селектор. Список селекторов содержит гнездо, если все его отдельные сложные селекторы содержат гнездо.

(скопируйте и вставьте из URL выше).

Пример допустимых селекторов согласно этой спецификации:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */
6
19 марта '19 в 17:14
источник

Здесь взломать с помощью pointer-events с hover:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>
5
01 авг. '18 в 1:47
источник

Хотя в стандартном CSS в настоящее время нет родительского селектора, я работаю над (личным) проектом, который называется ax (т.е. расширенный синтаксис селектора CSS/ACSSSS), который среди 7 новых селекторов включает в себя оба:

  1. непосредственный родительский селектор < (который позволяет противоположный выбор для >)
  2. селектор любого предка ^ (который разрешает выбор, противоположный [SPACE])

В настоящее время топор находится на относительно ранней стадии развития бета-версии.

Смотрите демо здесь:

http://rounin.co.uk/projects/axe/axe2.html

(сравните два списка слева в стиле стандартных селекторов и два списка справа в стиле топоров)

5
18 февр. '17 в 20:06
источник

По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это. Но теперь это можно сделать довольно легко в JS, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, что код довольно короткий.

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>
4
01 февр. '18 в 17:18
источник

Нет, вы не можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active, не было бы легче перенести этот класс на li (вместо a)? Таким образом, вы можете получить доступ только к li и a только через css.

3
28 нояб. '15 в 0:16
источник

Это возможно с амперсандом в SASS:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS-вывод:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
2
03 авг. '17 в 21:19
источник

Есть идеи?

CSS 4 будет интересен, если он добавит несколько хуков в ход назад. До этого можно (хотя и не рекомендуется) использовать checkbox и/или radio input ы нарушить обычный способ, которым вещи связаны, и через которые также позволяют CSS работать вне его нормальной сферы...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old MS opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more 'select' like if ya like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that ya may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* MS!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}


.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}


.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}
    
    <!--
      This bit works but will one day cause troubles,
      but truth is ya can stick checkbox/radio inputs
      just about anywhere and then call them by id with
      a 'for' label, keep scrolling to see what I mean
    -->
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-default">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-one">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... довольно грубо, но только с помощью CSS и HTML, можно прикоснуться и снова прикосновение ничего, кроме body и :root из примерно где - нибудь, связывая id и for свойств radio/checkbox input s и label запускающего; Скорее всего, кто-то покажет, как снова прикоснуться к ним.

Еще одно предостережение заключается в том, что может использоваться только один input определенного id, первый checkbox/radio получает переключенное состояние другими словами... Но все метки могут указывать на один и тот же input, хотя это будет выглядеть как на HTML, так и на CSS даже грубее.


... Я надеюсь, что существует какой-то обходной путь, который существует в CSS уровня 2...

Не уверен насчет других : селекторов, но :checked до CSS3, если я правильно помню, было что-то вроде [checked] поэтому вы можете найти его в приведенном выше коде, например...

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... но такие вещи, как ::after и :hover Я совершенно не уверен, какая версия CSS появилась впервые.

С учетом всего вышесказанного, пожалуйста, никогда не используйте это в производстве, даже в гневе, как шутка, или другими словами, просто потому, что что-то можно сделать, не всегда означает, что следует.

1
08 июня '19 в 9:31
источник

@документ

Хотя технически это не родительский селектор, он позволит вам выбрать URL страницы, который примерно так же "родительский", как он есть. Пожалуйста, имейте в виду, что вам нужно будет отстаивать это (см. Нижнюю часть этого поста для дальнейших инструкций). Я обновлю этот пост, как только этот метод станет жизнеспособным для веб-авторов.

Допустим, вы хотите изменить background-image навигационного заголовка для каждой страницы. Ваш HTML обычно будет выглядеть следующим образом:

<body>

<main id="about_"></main>

<header><nav></nav></header>

</body>

Добавление атрибута id к элементам head и body не является профессиональным и несовместимым с Web 3.0. Однако, выбрав URL, вам не нужно добавлять какой-либо HTML-код в любом смысле:

@document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}

Поскольку вы профессионал (не так ли?), Вы всегда тестируете свой код локально, прежде чем развертывать его на работающем сервере. Так что статические URL не будут работать на localhost, 127.0.0.1 :1 и т.д. - по умолчанию. Это означает, что если вы собираетесь успешно протестировать и проверить свой код, который вам понадобится для запуска серверных сценариев на вашем CSS. Это также подразумевает, что, если вы разрешаете пользователям запускать CSS на вашем сайте, вы должны убедиться, что их CSS-код не может выполнять сценарии на стороне сервера, хотя ваш может. Большинство людей, которые сочтут эту часть поста полезной, могут не знать, как к ней подойти, и все сводится к тому, как вы организуете свою рабочую среду.

  1. Всегда запускайте свою локальную среду на RAID 1, 5, 6, 1 + 0 или 0 + 1 (обычно ошибочно принимают за несуществующий "RAID 10", а 0 + 1 и 1 + 0 - очень разные звери).
  2. Не храните свою работу (и личные файлы) на том же диске, что и ваша ОС; в конечном итоге вы будете переформатировать, настроены вы или нет.
  3. Ваш корневой путь должен выглядеть примерно так (на сервере WAMP (Windows, Apache, MariaDB и PHP)): D:\Web\Version 3.2\www.example.com\.
  4. В PHP вы начнете с вашего $_SERVER['DOCUMENT_ROOT'] (вы можете определить ОС Linux с помощью условия if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {}).
  5. Вы сохраняете копии старых версий, потому что вам нужно видеть рабочие копии на случай, если вы что-то забыли и напортачили, отсюда и версия.

Следующее предполагает, что ваш живой сервер использует www. (https://www.example.com/ вместо https://example.com/):

<?php
if (!isset($_SERVER['HTTP_HOST']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_HOST'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_HOST'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_HOST']);

 if (stristr($_SERVER['HTTP_HOST'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_HOST']=='localhost' || $_SERVER['HTTP_HOST']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_HOST'],0,7)=='192.168' || substr($_SERVER['HTTP_HOST'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>

$a A вернет две части вашего URL. URL-адрес вашей главной страницы или корневого сайта будет / поэтому о/будет about/ после того, как вы explode или split при сравнении строк. Это даст вам около 80% пути (как для локального, так и для живого тестирования), так что вы сможете запускать один и тот же код в обеих средах и использовать его в CSS для восстановления URL-адресов.

Поддержка браузера

Начиная с 2019 года только Gecko 61+ поддерживает эту функцию и только за флагом. Я уже защищал, что это становится пригодным для использования веб-авторами. Дэвид Барон (David Baron) является автором модуля 3 Условных правил CSS. Основная причина, по которой не существует "родительский селектор" CSS, связана с влиянием на производительность; этот метод сведет на нет влияние на производительность. Я также рекомендовал поддерживать относительные URL при наличии base элемента HTML. Если вы читаете это в 2019 году или вскоре после него (привет всем в 47 632 году!), Пожалуйста, сначала укажите следующие URL-адреса:

0
21 июня '19 в 13:57
источник

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

<div className={'parent ${hasKiddos ? 'has-kiddos' : ''}'}>
    {hasKiddos && kiddos.map(kid => (
        <div key={kid.id} className="kid">kid</div>
    ))}
</div>

А потом просто:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}
0
13 июня '19 в 11:25
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос