Select all labels inside element except inside one div - css

Question

Trying to select all labels inside an element except labels inside one child div. Tried two approaches but nothing seems to be working
.parentDiv *:not(.skipLabelsParent) label {
display: inline-block;
margin-bottom: 12px;
}
This is failing because * selects all parents including child elements of skipLabelsParent class and parents of labels inside.
.parentDiv label:not(.skipLabelsParent label) {
display: inline-block;
margin-bottom: 12px;
}
I am not sure why this is failing.
Any solutions other than this?
fiddle here
The fiddle contains just an example of situation. Don't take that as final case. Labels could be anywhere and at any level. I just want to
skip inside every skipLabelsParent class. I made that very clear in my
question. Please read question again and provide generic solution.
Else I will look for other approach.

Answer 1

I think the easiest way to do what you want, is to do some intelligent re-styling of the labels you want to skip with a good selector:
.parentDiv .skipLabels{/*your css here*/)
and style the child div with that selector. This would be the least amount of work.
Next, depending on how many labels we're talking about, is to add the class directly to the labels you want to skip so that the following code would skip the <label>'s with the class .skipLabels:
.parentDiv label:not(.skipLabels) {
display: inline-block;
margin-bottom: 12px;
}
If that isn't gong to work for you, then I think you should just override the the child div's styling right under the parent divs:
.parentDiv{
display: inline-block;
margin-bottom: 12px;
}
.skipLabels{
display: .....;
margin-bottom: ....;
}
This way, you can put the .skipLabels class anywhere and you will know the styling will take effect like you want.

Answer 2

I believe that it is not working because you cannot chain selectors in :not yet http://caniuse.com/#search=%3Anot
https://developer.mozilla.org/en/docs/Web/CSS/:not
Currently you can only use “simple selectors”
https://drafts.csswg.org/selectors-3/#simple-selectors
This works for example:
HTML:
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
.parentDiv label:not(.skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/19/
Whereas this selector breaks all together:
HTML:
<label>Pnoe</label>
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
label:not(.parentDiv .skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/20/

Answer 3

In your CSS you can define
.parentDiv > label{
color: red;
}
Thanks to the ">"-operator, only elements that are direct children of the element before are selected. In your case only the first label "Pnoe".

Answer 4

Given this nested div/label fragment:
div:not(.skipme) > label {
color: red;
}
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label>Pnoe</label>
<label>Pnoe</label>
<div>
<label>Nested Phoe</label>
</div>
</div>
<div class="skipme">
<label>skip me</label>
</div>
<div class="somediv">
<label>Phoe</label>
<div class="another-div">
<label>Phoe</label>
</div>
</div>
</div>