根据其子元素将CSS样式应用于元素(Apply CSS styles to an element depending on its child elements)

根据其子元素将CSS样式应用于元素(Apply CSS styles to an element depending on its child elements)

是否可以为元素定义CSS样式，仅在匹配元素包含特定元素（作为直接子项）时才适用）？

我认为这是最好的解释使用一个例子。

注意 ：我正在尝试对父元素进行样式 ，具体取决于它包含的子元素。

<style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div should have a red border because if contains a div with class="a" --> <div> <div class="a"></div> </div> <!-- the following div should have a blue border --> <div> <div class="b"></div> </div>

注意2 ：我知道我可以使用javascript来实现这一点，但我只是想知道这是否可能使用一些未知（对我）的CSS功能。

Is it possible to define a CSS style for an element, that is only applied if the matching element contains a specific element (as the direct child item)?

I think this is best explained using an example.

Note: I'm trying to style the parent element, depending on what child elements it contains.

<style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div should have a red border because if contains a div with class="a" --> <div> <div class="a"></div> </div> <!-- the following div should have a blue border --> <div> <div class="b"></div> </div>

Note 2: I know I can achieve this using javascript, but I just wondered whether this is possible using some unknown (to me) CSS features.

最满意答案

据我所知，根据子元素设计父元素不是CSS的一个可用功能。 您可能需要脚本编写。

如果你可以像div[div.a]或div:containing[div.a]这样做div:containing[div.a]就像你说的那样，这div:containing[div.a] ，但这是不可能的。

你可能想考虑看jQuery 。 它的选择器使用“包含”类型工作得很好。 您可以根据其子内容选择div，然后在一行中将CSS类应用于父类。

如果你使用jQuery，那么这样的事情可能会有效（未经测试，但理论是这样）：

$('div:has(div.a)').css('border', '1px solid red');

要么

$('div:has(div.a)').addClass('redBorder');

结合CSS类：

.redBorder { border: 1px solid red; }

这是jQuery“has”选择器的文档。

As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.

It'd be wonderful if you could do something like div[div.a] or div:containing[div.a] as you said, but this isn't possible.

You may want to consider looking at jQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.

If you use jQuery, something along the lines of this would may work (untested but the theory is there):

$('div:has(div.a)').css('border', '1px solid red');

or

$('div:has(div.a)').addClass('redBorder');

combined with a CSS class:

.redBorder { border: 1px solid red; }

Here's the documentation for the jQuery "has" selector.