CODEWITHSUNDEEP
csscss-selectors
GC_
GC_

Reputation: 1673

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

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?

Upvotes: 1

Views: 870

Answers (4)

You
You

Reputation: 23814

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.

Upvotes: 1

andyb
andyb

Reputation: 43823

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

Upvotes: 1

russellfeeed
russellfeeed

Reputation: 627

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.

Upvotes: 0

ayyp
ayyp

Reputation: 6608

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.

Upvotes: 0

Related Questions