Arhn - архитектура программирования

Селектор CSS, который ссылается на значение атрибута, которое совпадает с родительским [дубликатом]

У меня есть список div, где отображается только один за раз. Это зависит от значения атрибута родителя. Например:

HTML:

<div id="parent" data-something="c">
  <div class="children" data-something="a"></div>
  <div class="children" data-something="b"></div>
  <div class="children" data-something="c"></div>
  <div class="children" data-something="d"></div>
</div>

CSS:

.children
{display: none;}

#parent[data-something="a"] .children[data-something="a"]
{display: block;}

#parent[data-something="b"] .children[data-something="b"]
{display: block;}

/*  etc. */

Можно ли каким-либо образом заставить этот селектор выбирать соответствующие дочерние элементы на основе значения родительского атрибута?

Что-то типа:

#parent[data-something="*"] .children[data-something="*"]
{display: block;}

Причина в том, что я не уверен, сколько детей у меня может быть, и я хочу посмотреть, есть ли способ на чистом CSS избежать написания всех возможностей.

07.02.2017

  • Единственный способ - сделать это для всех параметров, как вы сделали в своем первом примере. Я так понимаю, вы используете какой-то серверный язык для вывода этих атрибутов данных? если это так, вы должны заставить свой язык на стороне сервера делать сложные вещи (в конце концов, css предназначен только для стилизации) и добавить класс, когда ваши атрибуты соответствуют атрибуту их родителей. 07.02.2017
  • @Pete, если это единственный способ, которым я, вероятно, в конечном итоге буду использовать JavaScript, поскольку я не могу знать, сколько элементов будет, и я предпочитаю не создавать 1000 возможностей в CSS. 07.02.2017
  • @NenadVracar Спасибо за предложение. Ну, дело в том, что родитель меняется с помощью JavaScript. Ваше предложение то же самое, но наоборот, поэтому оно не решает проблему. 07.02.2017

Ответы:


1

Итак, вам нужен общий селектор потомков, где значение data-something свойство вашего предка всегда такое же, как и значение свойства data-something вашего потомка, независимо от того, какое это значение?

К сожалению, это невозможно с помощью CSS!

07.02.2017
  • Спасибо за ответ, но это не решает проблему. 07.02.2017
  • @Alvaro: Ну, вы сказали атрибут, а не значение атрибута, хотя, судя по вопросу, ясно, что вы имели в виду последнее. 07.02.2017
  • @BoltClock Спасибо, вопрос отредактирован. 07.02.2017
  • @Alvaro: Итак, это не то, чего вы пытаетесь достичь ? Пожалуйста, объясните, что именно вы ищете, тогда... 07.02.2017
  • @JohnSlegers Я ищу селектор, который не позволяет мне написать все возможности, как в этой скрипке< /а>. 07.02.2017
  • @Alvaro: Значит, значение data-something вашего родителя должно совпадать со значением data-something вашего ребенка? 07.02.2017
  • Я бы так предположил, основываясь на списке, показанном в вопросе. 07.02.2017
  • @JohnSlegers Да. В основном я пытаюсь найти способ связать значение атрибута родителя с конкретным дочерним элементом и найти способ управлять всеми возможностями. Но похоже, что это невозможно без записи каждого случая. 07.02.2017
  • @Alvaro: В CSS это действительно невозможно. Зачем вам этот функционал? 07.02.2017
  • @JohnSlegers Показать или скрыть дочерние элементы, кроме определенного элемента, если бы это было возможно, это был бы очень удобный способ. Но мне придется полагаться на простое активное изменение класса и JavaScript. Спасибо за время :) 07.02.2017
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..


    © 2024 arhn.ru, Arhn - архитектура программирования