Partial grouping of a CSS selector

Question

I can't seem to find an answer to this so either it's not possible or i'm not wording my searches correctly - i'm hoping someone on here can help? :)

I have some HTML (UL in my example) who's grand-parent (div) occasionally has a sibling and occasionally doesn't. An example of this might be :

No Sibling Example

<section>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
</section>

Sibling Example

<section>
    <div id="sibling1">xxx</div>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
    <div id="sibling2">yyyy</div>
</section>

I want to select the UL element only when it's grandparent (div) has siblings.

I was going to use the preceding selector.. something like

section div div#item ~ ul 
{
    background: #ff0000;
}

but I cant seem to get it to work.

Any guidance greatly appreaciated!

Hi Amit, thanks - that's kind of what I was trying to do. Scimonsters response matches what I needed, as I needed to be able to not just run down the chain, but put a sibling selector in as my actual code is a bit more complex than my example so chaining down although works, isn't specific enough. — LinKeCodes
– LinKeCodes, Commented May 27, 2015 at 9:22

Scimonster · Accepted Answer · 2015-05-27 09:14:36Z

1

section div~div div#item ul 
{
    background: #ff0000;
}

You need to select the parent div if it has a sibling. I'm not sure what your original selector was doing, but it was wrong.

Snippet with:

section div~div div#item ul 
{
    background: #ff0000;
}

<section>
    <div id="sibling1">xxx</div>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
    <div id="sibling2">yyyy</div>
</section>

Snippet without:

section div~div div#item ul 
{
    background: #ff0000;
}

<section>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
</section>

answered May 27, 2015 at 9:14

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LinKeCodes Over a year ago

Thankyou Scimonster, that's exactly what I was trying to do! For some reason my brain failed me this morning.

Vandervals · Accepted Answer · 2015-05-27 11:03:01Z

1

You can do this:

section>div:not(:only-child) ul{
    background: red;
}

Here is a pen with two sections so you can see it works: http://codepen.io/vandervals/pen/qdqMvq

This has 2 advantages from the ~ method:

-It selects all ul from divs not only from one div.

-It is more readable.

edited May 27, 2015 at 11:03

answered May 27, 2015 at 10:51

Vandervals

6,1298 gold badges54 silver badges101 bronze badges

2 Comments

LinKeCodes Over a year ago

I did not know the only-child selector existed, so thankyou for teaching me something new. I agree that it is much more readable, so generally will be something I shall consider using. In this instance however, I think Scimonsters post suits me better, each of the sibling divs has many things inside them, and I need to be quite specific here. In your example <ul>yyyy</ul> is also highlighted, and to prevent this ( with my actual html not the stripped back version I posted) I feel it would end up more complicated in this instance. A very good example though so thankyou.

Vandervals Over a year ago

The problem is that if you have another div, the other selector will highlight 2 as well.... If you want specificity you'd need a class somewere

Collectives™ on Stack Overflow

Partial grouping of a CSS selector

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related