2017-02-07 5 views
0

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

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, чтобы избежать написания все возможности.

+0

Единственный способ сделать это для всех вариантов, как вы это делали в первом примере. Полагаю, вы используете какой-то серверный язык для вывода этих атрибутов данных? если это так, вы должны сделать свой язык на стороне сервера, чтобы сделать сложные вещи (ведь css предназначен только для стилизации) и добавить класс, когда ваши атрибуты соответствуют атрибуту их родителей – Pete

+0

@Pete, если это единственный способ, которым я, вероятно, JavaScript, поскольку я не могу знать, сколько предметов будет, и я предпочитаю не создавать 1000 возможностей в CSS. – Alvaro

+0

@NenadVracar Спасибо за предложение. Ну, дело в родительских изменениях с JavaScript. Ваше предложение одно и то же, но наоборот, поэтому оно не решает проблему. – Alvaro

ответ

0

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

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

+0

Спасибо за ответ, но это не решает проблему. – Alvaro

+0

@ Альваро: Ну, вы сказали «атрибут», а не «значение атрибута», хотя, судя по этому вопросу, ясно, что вы имели в виду последний. – BoltClock

+0

@BoltClock Спасибо, вопрос отредактирован. – Alvaro