Add margin when any child element does not have a class

Asked Sep 03 '14 at 14:20

Active Sep 03 '14 at 14:24

Viewed 28 times

I'm creating a menu in CSS which looks like:

<li id="menuTask" class="menuEntry line">
    <div>
        <div class="imageHolder">
            <img alt="Task" src="Resources/Icons/Task.png" />
        </div>
         <div class="menuItem">Task</div>
     </div>
 </li>
<li id="menuTask2" class="menuEntry line">
    <div class="subMenuHolder>
        <div class="imageHolder">
            <img alt="Task" src="Resources/Icons/Task.png" />
        </div>
         <div class="menuItem">Task</div>
     </div>
 </li>

You'll notice that every menuitem is wrapped inside a LI element. In some cases the DIV under the li element has a class subMenuHolder.

Now I would like to add some padding on the LI element, but only if the child div element does not contain the class subMenuHolder.

Is something like that possible with plain CSS selectors?

I was thinking about using the :not selector, but I don't quite find it.

edited Sep 03 '14 at 14:22

asked Sep 03 '14 at 14:20

Complexity

5,682
6
41
84

I know but this was some quick copy-pasting. My id's are really different :) I've changed it in the original question to avoid misunderstanding. – Complexity Sep 03 '14 at 14:23
In current CSS you cannot influence a parent element's appearance based on the child. You have to solve this in a different way. – kapa Sep 03 '14 at 14:26
Thanks for the anwser. jQuery to the rescue :-) – Complexity Sep 03 '14 at 14:26
Maybe you only have to rethink the structure a bit. – kapa Sep 03 '14 at 14:27
@Complexity if js can be used for the solution, please edit the question and add the proper tags – Huangism Sep 03 '14 at 14:27

Add margin when any child element does not have a class

0 Answers0