селекторы - селектор на одном уровне css




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

Есть идеи?

CSS 4 будет интересен, если он добавит несколько хуков в ход назад . До тех пор можно (хотя и не желательно) использовать checkbox и / или 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;
}

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

/* ▼ - 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 с и label триггеры ; Скорее всего, кто-то покажет, как снова прикоснуться к ним.

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

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

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

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

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

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

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

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

li < a.active {
    property: value;
}

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

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

Есть идеи?


@документ

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

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

<body>

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

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

</body>

Добавление id атрибута к элементам head and 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 Возвратит две части вашего URL. Ваша главная страница или корневой URL-адрес веб-сайта будут / такими же, about/ как вы explode или split при сравнении строк. Это даст вам около 80% пути (как для локального, так и для живого тестирования), так что вы сможете запускать один и тот же код в обеих средах и использовать его в CSS для восстановления URL-адресов.

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

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


Я бы нанял немного кода 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;
}

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

E ~ F {
    property: value;
}

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


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

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

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

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

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

li:has(> a.active) { /* styles to apply to the li tag */ }

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

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

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

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

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

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

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


Вы можете использовать этот 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; }

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

Кстати, это работает в IE.


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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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


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

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

Краткий ответ - НЕТ , у нас нет parent selector на этом этапе в CSS, но если у вас нет возможности поменять местами элементы или классы, второй вариант использует 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;

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


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

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

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

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


По крайней мере, до 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>


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

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

Сейчас 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; }
 */

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

Однако вы также можете сделать что-то подобное.

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

JQuery

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

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


Это возможно с помощью амперсанда в 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;
}

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

Например:

body! a:hover{
   background: red;
}

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

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


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

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


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

li.active > a {
    property: value;
}




css-selectors