CODEWITHSUNDEEP
htmlcsscss-selectors
TanzNukeTerror
TanzNukeTerror

Reputation: 37

CSS selector to check an attribute of a child div and style based on the result?

Is there some kind of CSS selector method I can use to get an attribute of a child element, and style the parent based on that element's value?

For example;

<div class="bigparent">
    <div class="message">
        <div class="iconcontainer">
            <div class="iconitself" label="thisone"></div>
        </div>
        <div class="textcontainer">
            <div class="text"></div>
        </div>
    </div>

    <div class="message">
        <div class="iconcontainer">
            <div class="iconitself" label="thatone"></div>
        </div>
        <div class="textcontainer">
            <div class="text"></div>
        </div>
    </div>
</div>

Say I need to get the first .message .iconcontainer .iconitself label, and edit the CSS of its .message parent. Is this possible in CSS, or would I have to resort to JS?

If it's even possible. Thanks in advance, guys~

P.S; I can't change the HTML any, as I'm simply writing a CSS theme. Also, I only need it for FireFox, so no cross-browser worries there.

Upvotes: 2

Views: 2757

Answers (1)

rgthree
rgthree

Reputation: 7273

No, you cannot.. yet. The CSS4 Selectors Spec shows a way to choose the subject of a rule, but it is not implemented in any browsers. To note, hopefully you will be able to do this soon (from the spec)

For example, the following selector represents a list item LI unique child of an ordered list OL:

OL > LI:only-child

However the following one represents an ordered list OL having a unique child, that child being a LI:

!OL > LI:only-child

Upvotes: 2

Related Questions