Is there a way to mix ids and classes with > in CSS

Question

What I want to do is something like:

#div_id > .some_class 
{
}

I don't want to change the class everywhere. I only want to change the class if it in that particular div.

Is ther some other way to do that same thing?

Answer 1

Your question already contains the child combinator CSS selector and will target the elements with class .some_class that are children of the element with id div_id, so if you have only one <div> with an id of div_id then it will only target the child elements with the class some_class. So it should work as already expected, except in IE6 of course which does not support that selector natively.

If you want to select grandchildren, use the descendant combinator.

• Child combinator body > p
• Descendant combinator body p

Answer 2

You've already stumbled upon the answer yourself:

#div_id > .class {
    /* CSS magic */
}

This selects .class if it is the direct descendant of #div_id. For all descendants regardless of depth, use the selector #div_id .class instead.

See also this JSFiddle.

Answer 3

You essentially have the answer there. If you want to modify all classes with in a div then the selector would be div#id .this_class. If it's just one instance of the class inside the div (say you have a div called 'test' with three divs with a class of 'test_class' then you could either use the :nth-child() selector or the :first-of-type selector.

Answer 4

Your code looks fine to me. Note that the > operator will only affect the children of the DIV not any lower decendants (i.e. grandchildren). Remove the > to affect everything inside the DIV with the class .some_class.