2

What I'm trying to achieve sounds really simple, but is not. I don't even know if I can accomplish what I'm trying todo.

Ok so we got our element with the classname .parent, .parent got two div children, one is immediate and the other one is put into the first one like so:

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

Targeting the first child should be as simple as:

.parent > div {
  color: green;
}

but it isn't, as "Second child" also get affected.

Is this achieveable?

Sidenote: Some CSS-properties like "color" is inheriting from parents, even though the element does not got the direct style. I guess this is what causing the issue. But still, I don't want it to cascade.

kortes
  • 33
  • 1
  • 9
  • This may be a typo in your code, but in your example, your `second child` div is INSIDE your `first child` div. – disinfor Feb 01 '15 at 18:57
  • Not a typo. Second should be inside first. – kortes Feb 01 '15 at 19:03
  • so basically you don,t want to change the color of second child is am right ? – J Prakash Feb 01 '15 at 19:04
  • Ahh..I see what you are asking now based on your edit. Well, you cannot accomplish what you want with one simple rule then. You need to basically overwrite the inheritance that `second child` gets from it's parent `first-child`. – disinfor Feb 01 '15 at 19:04
  • J Prakash: yes. And I don't want to specify the color of 2nd child either, I want it to be "NORMAL". What DOM has. – kortes Feb 01 '15 at 19:06
  • disinfor: I don't want to overwrite it, this requires me to know the previous color, font-size, or line-height or whatever property I am using. – kortes Feb 01 '15 at 19:07

4 Answers4

4

Parent element color is inherited to children element. First set div color and then use direct children's color:

.parent div{
  color: #000;
  }
.parent > div {
  color: green;
}
<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • So basically I can't apply property "color" to only the immediate children of .parent? I can do this with certain properties like vertical-align, or are every property cascading? I don't want to "reset" the font color, or any property of that matter. I just don't want the properties I set to cascade to children that are not targeted.. – kortes Feb 01 '15 at 19:00
0

The css is in cascade so the changes you do to an element effect the children. You could, however put a css class to the second child to override the css.

satchcoder
  • 797
  • 5
  • 11
  • But this would require me to "reset" the color, which I don't want to. I want the color to only affect the first immediate children. – kortes Feb 01 '15 at 18:58
  • I also noticed some properties does not cascade. Like vertical-align. – kortes Feb 01 '15 at 18:58
0

When you use div > p it means that Selects all p elements where the parent is a div element

But if you set one element with a property, all children will inherit that property if you don't override it. For example:

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

In your case, all divs will have the property color:green by inheritance. If you want to change the property of the second div you have to do the following: div.parent div div { color: red }. This means Select all div which parent is a div which parent is a div with class "parent".

This is how stylesheets work.

Serginho
  • 7,291
  • 2
  • 27
  • 52
  • Yes I know. But setting "div.parent div div" rulings means I KNOW what color I want on ~3rd div. But in my case I don't know, I just want it to use what DOM uses (or what's previously set in the CSS). But I guess this isn't achiveable due to how CSS cascades. – kortes Feb 01 '15 at 19:11
  • No, it isn't. When you set properties to divs, all properties are inherited unless you change again in children elements. – Serginho Feb 01 '15 at 19:20
0

No, you can't.

CSS color property is Inherited by default.
It's not possible to do it in the way you want.

But more important: It's not an ISSUE, it's the way that supposed to be.
Remember: CSS => Cascade Style Sheet.

Now, for your question... the simple, easy and the right way to "solve" this... is the one that already told you @Bhojendra Nepal in his previous answer.

Edit:

Another option would be wrapping that flying text in a span tag.. or similar:

.parent > div > span {
  color: green;
}
<div class="parent">
  <div>
    <span>First child</span>
    <div>
      <span>Second child</span>
    </div>
  </div>
</div>
Community
  • 1
  • 1
gmo
  • 8,860
  • 3
  • 40
  • 51
  • Thanks for the clear answer. What I try to achieve is impossible in the way I want to be able to achieve it. This is no "Ah-ha CSS moment" for me, I already know how it cascades, I just want to clearify how the cascading works since some properties does cascade and some doesn't. [I've done CSS throughout my years](http://getleaf.com) – kortes Feb 01 '15 at 19:29
  • Yep, it is.. but not really too complicated to resolve... If you have a well structure `html code`, your `css` will do exactly what you want. That's the way that supposed to be. – gmo Feb 01 '15 at 19:34
  • I understand. But my example is a tiny bit of a much bigger problem. I basically want .parent to apply `several` properties to it's immediate children, but I don't want to _reset_ them deeper down in the hierarchy. – kortes Feb 01 '15 at 19:36
  • With a full example would be more easy to help you... You really can do what you are after, but need to elaborate more your code. and sorry for the "ah-ha moment" was just a joke.. removed now from the answer. – gmo Feb 01 '15 at 19:38
  • I'll post a more specific question regarding this issue later. I might link it here if you want to check it out. – kortes Feb 01 '15 at 19:43
  • Post edited.. @kortes, check the snippet example to see if it clarify little more. – gmo Feb 01 '15 at 19:48
  • Here's the [real deal](http://stackoverflow.com/questions/28282839/building-a-grid-framework-with-inline-blocks/) – kortes Feb 02 '15 at 17:11
  • Ein?.. But that's another question that has nothing to do with this. – gmo Feb 03 '15 at 13:32
  • Agreed, but this describes the method I'm using for making the grid. Anyway, I'm kinda new to stackoverflow so sorry if my questions are spread out or if I'm simply using it wrong. – kortes Feb 03 '15 at 15:42
  • No problem, welcome then, and good luck with your project ;-) – gmo Feb 03 '15 at 15:58