element with a given child

 

This question already has an answer here:

  • Is there a CSS parent selector? 26 answers

    • Is it possible to select an element if it contains a specific child element?

    Unfortunately not yet.

    The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.

    A Note About Specification Changes

    This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.

    An older "Selectors Level 4 Working Draft" described a feature which was the ability to specify the "subject" of a selector. This feature has been dropped and will not be available for CSS implementations .

    The subject was going to be the element in the selector chain that would have styles applied to it.

    Example HTML 
    <p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

    This selector would style the span element 

    p span {
    color: red;
}

    This selector would style the p element 

    !p span {
    color: red;
}

    A more recent "Selectors Level 4 Editor's Draft" includes "The Relational Pseudo-class: :has() "

    :has() would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery's custom :has() pseudo-selector*.

    In any event, continuing the example from above, to select the p element that contains a span one could use: 

    p:has(span) {
    color: red;
}

    * This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.

    For completeness, I wanted to point out that in the Selectors 4 specification (currently in proposal), this will become possible. Specifically, we will gain Subject Selectors, which will be used in the following format: 

    !div > span { /* style here */

    The ! before the div selector indicates that it is the element to be styled, rather than the span . Unfortunately, no modern browsers (as of the time of this posting) have implemented this as part of their CSS support. There is, however, support via a JavaScript library called Sel, if you want to go down the path of exploration further.

    I agree that it is not possible in general.

    The only thing CSS3 can do (which helped in my case) is to select elements that have no children: 

    table td:empty
{
   background-color: white;
}

    Or have any children (including text): 

    table td:not(:empty)
{
   background-color: white;
}
    链接地址: http://www.djcxy.com/p/22818.html

    上一篇: 将样式应用于父项，如果它具有带CSS的子项

    下一篇: 元素与给定的孩子