Есть ли способ установить CSS родителя элемента?

Question

Есть ли способ объявить объявление CSS, которое нацелено на родительский элемент элемента по id?

Например, я знаю идентификатор моего элемента «element1», но я не знаю идентификатора его родителя. Я хочу объявить информацию CSS для myDiv, но я не буду знать ее идентификатор.

HTML:

<div id="myDiv"> 
    <div id="element1"> hello </div> 
</div> 

CSS:

#element1(parent) { 
    border:1px solid red; 
} 

Answer 1

Нет, сейчас нет. Об этом часто говорили в группах WHATWG и т. Д., Но до года или два назад разработчики браузеров отказались поддерживать какие-либо предложения для таких селекторов, потому что это слишком замедляло бы правило CSS из-за того, что DOM анализируется.

С достижениями в области синтаксического анализа двигателей DOM в настоящее время считается возможно с конца поставщика браузера, и как таковые есть предложение теперь включать некоторые вида целевой селектора в CSS4, даже с синтаксисом еще обсуждается , Прямо сейчас, нет браузера, который поддерживает любую из предложенных нотаций, и никто из них даже не готов внутренне поддерживать такую ​​функцию.

The current CSS4 Selectors draft упоминает предмета спецификатора, но даже содержит явную записку прямо сейчас, что это не определилось ли, если это предложение имеет место, то ! должно предваряться или добавляется к селектору, или если должен быть даже 2 из них ,

Answer 2

Не с ванильным css. Вы можете попробовать scss, less или какой-нибудь другой язык генерации динамических css.

Вам нужны вложенные объявления и поддержка родительского селектора.

Вот пример, который работает как в и СКС менее:

#element1 { 
    #myDiv & { border: 1px solid red; } 
} 

Некоторые ссылки:

• Referencing parent (SCSS)
• Nested rules (LESS)

Answer 3

Вы можете сделать это с JQuery, если вы не ограничены только CSS:

$(document).ready(function(){ 
    $("#element1").closest("div").css({"({"border":"1px solid red"}); 
}); 

Для нескольких родителей использовать родитель() и для ближайшего одного использования ближайшего(). Ближайшее() отлично, потому что оно только соответствует первому родителю, который соответствует вам.

Answer 4

, если вы знаете, родительский элемент это ДИВ:

div > #element1{ 
    border:1px solid red; 
} 

, но если вы не знаете, что тег является родителем вашего элемента, читать все это, прежде чем использовать этот код:

* > #element1{ 
    border:1px solid red; 
} 

Это читается как: все элементы, которые являются прямым потомком (который может быть только одним) элемента с id 'myDiv'.

Есть некоторые проблемы совместимости с браузером, но, согласно this post, парень говорит, что он совместим с IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf 5.0 Win , Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 и Opera 10.60.

Но действительно плохой об этом коде - это может привести к проблемам с производительностью (хотя я и не тестировал), потому что вы заставляете браузер проходить через все элементы страницы (которые могут быть обширными) ,

Теперь, если вы хотите быть хорошим css-кодером и избегать этого, вы должны думать наоборот, как и все остальные, например, применяя классы или идентификатор к родительскому элементу. Если вы не можете связаться с ними, проверьте, возможно ли вставить новый div в вашу структуру, обертывающий ваш элемент # element1 и являющийся родителем этого элемента или даже использующий javascript.