-6

this question has probably asked and answered a million times but I just want to know the difference of using .div1 > .div1-1 compare to .div1 .div1-1.

I know that ">" is child selector so .div1 (parent) > .div1-1 (child).

<div class="div1">
<div class="div1-1">Test</div>
</div>

.div1 > .div1-1{ color:red;}

Which approach is the best practice to use?

pavel
  • 26,538
  • 10
  • 45
  • 61
nCore
  • 2,027
  • 7
  • 29
  • 57
  • 1
    The one that meets your needs. – Hashem Qolami Feb 19 '15 at 14:54
  • 3
    `>` means only children (and not grandchildren). Which is best? It depends on your structure. – Harry Feb 19 '15 at 14:54
  • 1
    have you already tried to google it? – BeNdErR Feb 19 '15 at 14:54
  • http://css.maxdesign.com.au/selectutorial/ is very instructive – Paul Dixon Feb 19 '15 at 14:55
  • @DanielPinzon In term of specificity, they both have the same value. – Hashem Qolami Feb 19 '15 at 14:56
  • possible duplicate of [What does the ">" (greater-than sign) CSS selector mean?](http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) – ggzone Feb 19 '15 at 14:56
  • @HashemQolami seems you are right will delete my comment :) – DaniP Feb 19 '15 at 15:01
  • What's with the negative points? Well yeah I know it will depend on my structure but the questions was about which is better approach? @ggzone Wasn't aware of that. – nCore Feb 19 '15 at 15:07
  • Why are there so many comments and down-votes before anyone bothers to answer the question? And no explanation for the down-votes? – Ted Feb 19 '15 at 15:13
  • @nCore the negative votes are a response of a "bad" question. You answered it yourself by pointing to that phrase: "this question has probably asked and answered a million times". There is enough docu,answers outside and even here in stackoverflow. – ggzone Feb 19 '15 at 15:15
  • @ggzone I still don't see why there'd be so many negative points whilst the link you've provided is no different from what I have. Also no vote-down explanation as Ted said which is annoying when the rules said "provide your reason". – nCore Feb 19 '15 at 15:18
  • @nCore it is a big community with some superbrains here. dont think they are all correct and following the rules. I am not a downvoter but i can understand them. But yes you are right every commentless downvote should have something like "there is enough docu" as sidenote – ggzone Feb 19 '15 at 15:21

1 Answers1

1

Try:

<style>
    .div1 .div1-1 {color: red;} /* all children */
    .div1 > .div1-1 {background: blue;} /* direct children */
</style>

<div class="div1">
    <div class="div1-1">Test</div>
</div>

// both .div1 > .div1-1 and .div1 .div1-1 do the same
// both rules are applied

http://jsfiddle.net/yb1Lfsd8/

vs.

<style>
    .div1 .div1-1 {color: red;} 
    .div1 > .div1-1 {background: blue;}
</style>

<div class="div1">
    <div>
        <div class="div1-1">Test</div>
    </div>
</div>

// Just .div1 .div1-1 change styles to '.div1-1'
// The first rule is applied only

http://jsfiddle.net/yb1Lfsd8/1/

pavel
  • 26,538
  • 10
  • 45
  • 61