CSS selector based on a condition

Question

I am trying to get a CSS selector to check and apply the CSS based on the condition that if: sectionContent-noToolbar is available, then apply height:2em

Answer 1

No, it isn't.

If they were siblings, then you could use the adjacent sibling combinator:

.sectionContent-noToolbar + .sectionSeperator {
    height: 2em;
}

… but CSS has nothing that lets you modify an element based on its siblings descendants.

Answer 2

As stated in another answer, there is no way to do this. To achieve the effect you wish to achieve you will need to rethink your implementation. This is because at its core, CSS is not a processed language and as such can not handle conditional statements.

In rethinking, you might look into CSS preprocessors such as LESS or SASS which seek to implement logical constructs in CSS.

Answer 3

CSS can't help you. You can achieve this with javascript since it can traverse in DOM. jQuery is quite neat for this task. Just select the node you want using css selectors and traversal functions like parents, siblings or children` and modify the found elements' style manually.