Питання Чи є основний селектор CSS?


Як вибрати <li> елемент, який є безпосереднім батьком елемента прив'язки?

У прикладі мій CSS буде таким:

li < a.active {
    property: value;
}

Очевидно, є способи зробити це з JavaScript, але я сподіваюся, що існує якийсь шлях вирішення, який існує на рівні CSS Level 2.

Меню, яке я намагаюся стилювати, вимовляється CMS, тому я не можу перемістити активний елемент до <li> елемент ... (якщо я не маю тему модуля створення меню, який я б краще не робив).

Будь-які ідеї?


2516
2018-06-18 19:59


походження


Я фактично не займався документами jquery, я просто намагався ілюструвати елемент, який я намагаюся вибрати. Ваша пропозиція дозволить вибрати всіх дітей тега li (див w3.org/TR/CSS2/selector.html) - jcuenod
Більше обговорення цієї проблеми на stackoverflow.com/questions/45004/... - MatrixFrog
@Tomas li> a.active вибирає дитину, а не батьків. - Stewart
Цікаво відзначити, що питання @ MatrixFrog посилання на цю сторінку в розділі "Це запитання вже має відповідь" ... - Agi Hammerthief
Чи є які-небудь оновлення цього питання? Я вважаю, що останнє записане кореспонденція з цього питання відбулося в березні 2014 року. Що відбувається з цим? - Master Yoda


Відповіді:


Наразі неможливо вибрати батьківський елемент у CSS.

Якщо був спосіб зробити це, це буде в будь-якому з поточних специфікацій селекторів CSS:

Тим часом вам доведеться вдатися до JavaScript, якщо вам потрібно вибрати батьківський елемент.


The Селектори Рівень 4 Робочий чернетка включає в себе a :has() псевдоклас, який працює так само, як і jQuery реалізація. Станом на 2018 рік це все одно не підтримується будь-яким веб-переглядачем.

Використовуючи :has() оригінальне питання можна було вирішити за допомогою цього:

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

2013
2018-06-18 20:16



Здавалося б, це вже було запропоновано і відхилено: stackoverflow.com/questions/45004/... - RobM
Виглядає, як суб'єкт вибору переглянуто, крім використання ! зараз: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. - animuson♦
Заголовок $ виглядала краще для мене ... додається ! можна пропустити легше. - Christoph
Великий трюк сюжету! Селектори 4 WD були оновлені сьогодні щоб виключити індикатор предметів з швидкого профілю, який буде використовуватися реалізаціями CSS. Якщо ця зміна залишиться, це означає, що ви більше не зможете використовувати індикатор теми у таблицях стилів (за винятком випадків, коли ви використовуєте, додайте який-небудь поліфіль, як описано в інша відповідь) - ви можете використовувати його лише з API Selectors та будь-де ще, щоб повний профіль можна було реалізувати. - BoltClock♦
Ще одне важливе оновлення: схоже, що вони розглядають питання про відмову від синтаксису селектора теми та їх заміни :has() псевдо, кожен знайомий і любить у jQuery. Останній ED видалив усі посилання на індикатор предмету та замінив його :has()псевдо. Я не знаю точних причин, але CSSWG проводив опитування деякий час тому, і результати повинні вплинути на це рішення. Це, швидше за все, для сумісності з jQuery (тому він може використовувати qSA без змін), так як синтаксис суб'єкта індикатора виявився надто заплутаним. - BoltClock♦


Я не думаю, що ви можете вибрати батьків тільки в CSS.

Але, як ви, здається, вже є .active клас, не було б легше перемістити цей клас до li (замість a)? Таким чином, ви можете отримати доступ до обох li і a через css тільки.


120
2018-06-18 20:08



Ви не можете перемістити псевдоселектор у елемент списку, оскільки він не є фокусуючим елементом. Він використовує активний селектор, тому, коли активовано якоря, він хоче, щоб елемент списку було порушено. Список елементів ніколи не буде в активному стані. На відміну від нещасного випадку, такого селектора не існує. Отримання чистого меню CSS для повноцінної доступності клавіатури неможливе без нього (за допомогою селекторів браузера ви можете створювати підменю, використовуючи вкладені списки, але після того, як список отримає фокус, він знову стає схованим). Якщо є які-небудь CSS-рішення для цього конкретного conun
@ Домінік Акіліна Погляньте на запитання: OP використовує клас, а не псевдонімець. - jeroen


Ви можете використовувати це сценарій.

*! > 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.


100
2017-08-13 10:13



припустимо, використовуючи jquery patent() буде швидше Однак це потребує тестування - Dan
@Idered Не вдається виконати, коли ви маєте CSS-декларацію теми Selector, без перемикача дитини (#a! Один кидає помилку #a! p працює), і тому інші не будуть працювати ні з-за Uncaught TypeError: Cannot call method 'split' of undefined: побачити jsfiddle.net/HerrSerker/VkVPs - HerrSerker
@HerrSerker Я думаю #a! є недійсним селектором, що слід вибрати? - Idered
@Нарешті я не знаю Спецзапис не говорить, що це незаконно. #a! повинен сам вибрати. По крайней мере, їх не повинно бути помилки в JavaScript - HerrSerker
На мій коментар до прийнятої відповіді, схоже, поліфолію може знадобитися навіть у найближчому майбутньому, оскільки індикатор предмету може ніколи не виконувати браузер у CSS. - BoltClock♦


Як згадує пару інших, не існує способу створити батьків / елементів елемента, використовуючи тільки CSS, але наступні роботи з jQuery:

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

75
2017-12-14 14:51



The < селектор не існує (підтверджено використанням jQuery 1.7.1). - Rob W
Можливо, що <Синтакс працював у 2009 році, але я оновив його (на 2013 рік). - Alastair
Ще краще, використовуйте вбудований jQuery :has() селектор: $("li:has(a.active)").css("property", "value");. Він читається аналогічно запропонованому CSS 4 ! селектор Дивись також: :parent селектор, .parents() метод, .parent() метод. - Rory O'Kane
І замість того, щоб використовувати .css("property", "value") щоб стиль виділених елементів, ви повинні, як правило, .addClass("someClass") і маєте у вашому CSS .someClass { property: value } (через) Таким чином, ви можете позначити стиль із повною потужністю CSS та будь-якими попередніми процесорами, які ви використовуєте. - Rory O'Kane


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

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

Тоді браузеру доведеться зачекати, доки він не завантажив і не проаналізував все, доки </body> щоб визначити, чи повинна сторінка бути червоною, чи ні.

Ця стаття Чому у нас немає батьківського селектора це детально пояснює.


44
2018-01-21 08:43



тому зробити браузер швидше. Інтернет швидше. цей селектор, безумовно, потрібен, і причиною його невиконання є, на жаль, тому що ми живемо у повільному примітивному світі. - vsync
власне, селектор зробить дуже швидкий переглядач виглядати повільно. - Salman A
Я сподіваюсь, що розробники браузера вийдуть з реалізації, яка (принаймні) настільки ж швидка, як і версія JavaScript, яка в кінці кінців використовується в будь-якому випадку. - Marc.2377


немає можливості зробити це в CSS2. ви можете додати клас до li і послатись на a

li.active > a {
    property: value;
}

39
2018-06-18 20:06



виставивши елемент дисплея: блоку можна створити його відповідно до всієї області літа. якщо ви можете пояснити, який стиль ви шукаєте, можливо, я міг би допомогти з рішенням. - Josh
це насправді є простим та елегантним рішенням, і в багатьох випадках має сенс встановити клас на батьківщину. - Ricardo


Селектор CSS "Генеральний комбінатор Sibling"Може бути, використовується для того, чого ви хочете:

E ~ F {
    property: value;
}

Це відповідає будь-якому F елемент, який передує a E елемент


26
2018-06-30 14:00



Це не правильна відповідь, але дякую, що нагадуєте нам про цей селектор - Dan
Це лише селектор братів, це не дитина, батько ... не дуже відповідає на питання мат - Alireza


Спробуйте переключитися 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: ...
}

24
2017-11-23 09:03





Не в CSS 2, наскільки я знаю. CSS 3 має більш надійні селектори, але не послідовно застосовується в усіх браузерах. Навіть із покращеними селекторами я не вірю, що він виконає саме те, що ви вказали у вашому прикладі.


19
2018-06-18 20:09





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

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

Виберете ul елемент, який має дочірній елемент з ідентифікатором якийсь Ід. Або, щоб відповісти на початкове запитання, слід зробити такий трюк (неперевірений):

$("li:has(.active)")

17
2018-05-16 22:04



Або використовувати $yourSpan.closest("ul") і ви отримаєте батьківський UL вашого проміжного елемента. Тим не менш ваша відповідь зовсім є фотопічним імхо. Ми можемо відповісти на всі питання, задані CSS, за допомогою рішення jQuery. - Robin van Baalen
Як виявлено в інших відповідях, неможливо це зробити, використовуючи CSS 2. З огляду на це обмеження, відповідь, яку я надав, є тим, що я знаю, є ефективною і є найпростішим способом відповісти на запитання за допомогою javascript imho. - David Clarke
Враховуючи ваші оновлення, деякі згодні з вами. Але єдиний відповідь залишається прийнятним; простий і просто "це не може бути зроблено так, як ви цього хочете". Якщо питання полягає в тому, як архівувати на велосипеді 60 миль на годину і ви відповісти на нього "просто: потрапити в машину і вдарити газ", це ще не відповідь. Звідси мій коментар. - Robin van Baalen
Такий підхід зробив би майже повністю марним. Я шукаю SO, як вирішити проблеми, а не знайти "єдину відповідь", не вирішує проблему. Ось чому СО настільки дивовижна, тому що завжди існує більше одного способу шкіри кота. - David Clarke


Це найбільш обговорюваний аспект Селектори рівня 4 специфікація За допомогою цього селектора можна буде стиснути елемент відповідно до своєї дитини, використовуючи знак оклику після даного селектора (!).

Наприклад:

body! a:hover{
   background: red;
}

буде встановлювати червоний фон-колір, якщо користувач переверне будь-який якорем.

Але нам доведеться чекати виконання браузерів :(


15
2018-05-05 18:24



На жаль, але тепер ця функція не вказує, як я знаю ... - Qwertiy