开发者

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 som开发者_StackOverflowe other way to do that same thing?


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.


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


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜