Использование CSS Target для выделения родительского div

Question

Я использую Ckeditor на своем сайте для вставки статей. Статьи обычно приходят из документа Word, и в них есть сноски. С последней сборкой Ckeditor (7125) я смог связать статью из правой сноски с якорями. Это делает это автоматически. Это ссылка на первую сноску (сноска указывает назад на источник).

<a href="#_ftn1" name="_ftnref1" title="">[1]</a>

<!-- This is the footnote -->
<div id="ftn1">
  <a href="#_ftnref1" name="_ftn1" title="">[1]</a>
First footnote. I want this to be highlight...
</div>

Как видите, каждая сноска находится внутри div. С помощью следующего CSS мне удалось выделить <a>:

a:target { background:yellow; }

Мой вопрос: как я могу выделить целое <div>, что <a> - его ребенок? ('ftn1', в примере.)

Спасибо!

Answer 1

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

$("a:target").parent().css("background", "yellow");

Answer 2

То, что вы хотите, не возможно.

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

То есть в CSS нет выбора предков.

Возможно, вы имеете контроль над родителем и можете добавить к нему класс (например, сноску).

Или вы можете использовать JavaScript, чтобы делать то, что вы хотите.