CSS Rule: Give style to all with children

Question

I'm trying to give a style to all <div> with children and not to those with no children. Or, give style to all, and give a different style to those with no children. The structure is similar to this

<div>
    <div>
         <div>
              <div>Don't style me</div>
              <div>Don't style me</div>
         </div>
         <div>Don't style me</div>
         <div>Don't style me</div>
         <div>
             <div>
                  <div>Don't style me</div>
             </div>
         </div>
    </div>
 </div>

@Zlatan, you mean give extra class to last children? this would be the easiest solution, but pretty ugly when structure gets more complicated — skyisred, Mar 14 '13 at 19:19
@ZlatanO. — That selects the last child element in its parent. It has nothing to do with how many children the element being selected has. — Quentin, Mar 14 '13 at 19:32

Spudley · Answer 1 · 2013-03-14T19:46:18.597

CSS level 4 is being worked on, and will include selectors that can do what you're asking.

When it does become available, the syntax will look like this:

.myclass! div { ... }

This will select the .myclass element that has a div element as a child. It's basically a normal CSS selector, but with the exclamation mark to tell it which element to select. (although note that the preferred syntax has changed a couple of times during the drafting process, and they've not finalised it yet!)

If you're interested in following up about this, you can read the full spec in its current form here: http://dev.w3.org/csswg/selectors4/

However that's in the future. For current browsers, what you want to achieve isn't really possible with pure CSS.

So what options do you have?

The most obvious work-around is to use javascript to achieve the effect you want. jQuery is perfectly capable of selecting elements in the way you've described, like so:
```
$('.myclass:has(div)');
```
Also obvious would be adding a class to the elements you want to style, and just using that. This could be done in Javascript or in your server-side code. Probably the most obvious answer, really, in the absence of an actual CSS selector you can use.
Depending on what you're trying to do, you could try re-arranging you HTML structure; in some cases, a bit of lateral thinking can help you achieve results that appear to do this, even with the CSS selectors available today. In particular, hover effects can often be worked around this way.
Again, depending on what your code looks like and what you're trying to do with it, you could try making use of some of the more esoteric CSS selectors. For example, div:empty will select divs that have no content. This won't work for the examples you've given (as you have text in the 'empty' divs), but would work in other cases where they really are empty.

score 1 · Answer 2 · answered Mar 14 '13 at 21:40

1

It can be done in 2 ways :-

1) Giving a specific class to the parent div and the child div will inherit the style.

2) Giving class to divs individually.

The better option would be implementing via the 1st option.

answered Mar 14 '13 at 21:40

Vish

171
3

score 0 · Answer 3 · answered Mar 14 '13 at 19:19

0

Use the ">" operator.

Some documentation

Like div > div {}

http://jsfiddle.net/9tLXP/

div {
    padding: 10px;
    background: red;
}

div > div {
    padding: 10px;
    background: blue;
}

div > div > div {
    padding: 10px;
    background: orange;
}

div > div > div > div {
    padding: 10px;
    background: green;
}

Edit: Obviously I went ahead and styled each one with a different background color to demonstrate the point. In your case you would delete some of the extra styling I provided.

answered Mar 14 '13 at 19:19

Michael

6,591
2
23
39

1

This will style everything except the outer div, including deepest child – skyisred Mar 14 '13 at 19:23
@skyisred Note my edit, in your case, you just need to style div > div Or be specific like I did and just reset the styles on the higher up bits. – Michael Mar 14 '13 at 19:25
2

The question is asking how to style *divs **with** children*, not *divs that **are** children of other divs*. – Quentin Mar 14 '13 at 19:25
@Quentin As per the second part of his question here: "Or, give style to all, and give a different style to those with no children." I beg to differ. My solution will work in that case. – Michael Mar 14 '13 at 19:28
1

@Michael — All 4 of the divs that are children of the div that is a child of the root element will get the same styles with your code. The question requires that the first and last are styled differently to the middle two. – Quentin Mar 14 '13 at 19:30

score 0 · Answer 4 · answered Mar 14 '13 at 19:30

If you are truly looking to use the structure you posted, one where no classes or id's are assigned to any elements, then you can not accurately detect the bottom element in a group with n amount of children.

Operators such as > can give you a direct descendant but they can not tell you if it has any further children without further loops as Michael has shown. The issue therefore with Michaels method is you could not detect a div at level 3, and a div at level 4 and style them the same, as all div's at level 3 now inherit this style.

Long and the short - without adding in a class or 2 you can't accurately detect the bottom most child of a nested structure without effecting it's siblings.

CSS Rule: Give style to all with children

4 Answers4