Какой самый простой способ написать этот селектор CSS?

Question

Какой самый простой способ написать селектор CSS, который соответствует

#id.X .X a

для всех X?

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

Редактировать: обрезанный HTML это для:

<div id="id" class="X">
<ul>
<li class="projects">...</li>
<li class="music">...</li>
<li class="resume">...</li>
<li class="contact">...</li>
</ul>
</div>

Где X - один из projects, music и т. Д. Цель, чтобы класс во вложенном div был равен классу одного из подобъектов, состоит в том, чтобы применить некоторый стиль к одному из конкретных элементы списка. Причина, по которой я хочу сделать это таким образом, а не что-то вроде active класса, заключается в том, что он делает мои файлы шаблонов намного более читабельными.

Answer 1

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

Чтобы было ясно, у меня теперь есть что-то вроде:

<div id="id">
<ul>
<li class="active">...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

Answer 2

Текущий CSS не предоставляет средств, позволяющих избежать перечисления всех комбинаций родительский / дочерний класс в вашем случае.Поэтому ваш шаблон должен быть более сложным, а CSS - менее сложным, или наоборот.Маркировка текущего элемента с классом типа active или cur является наиболее универсальным и широко используемым решением.

Answer 3

Поскольку вы хотите, чтобы class, который является дочерним элементом того же class, в качестве основы для цели, я думаю, у вас есть три варианта, first , являющийсяметод, который вы используете.

секунда будет добавлять некоторые дополнительные элементы в HTML (второй класс для второго объекта только тогда, когда он вложен ), например, так:

CSS

.nestedA a {... blah ...}

HTML

<div id="id" class="X"><div class="X nestedA"><a></a></div></div>

Так что это сокращает ваш CSS, но расширяет ваш HTML,требуя, чтобы вы закодировали его (зная, что он вложен, либо вручную, либо посредством обнаружения javascript).

третий - это префикс любых классов, для которых вы хотите этои используйте селектор начала атрибута (IE8 + с DOCTYPE) примерно так (обратите внимание, что начальная часть должна быть отделена дефисом):

CSS

.na-X {... X class blah ...}
[class|=na] [class|=na] a {... blah ...}

HTML

<div id="id" class="na-X"><div class="na-X"><a></a></div></div>

Answer 4

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

Начинается с

#id[class^="foo"] *[class^="foo"] a { color: red; }

Содержит

#id[class*="foo"] *[class*="foo"] a { color: red; }

Заканчивается на

#id[class$="foo"] *[class$="foo"] a { color: red; }

Скрипка с использованием начинается с: http://jsfiddle.net/TufaD/

Альтернативной стратегией будет назначение общего класса всем элементам, которые вы хотите стилизовать таким образом.