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 on sectionSeperator. Is it possible to achieve that using some selector? I have been searching for an answer for quite a while now without any luck. Any suggestions?

<section class="sec" name="Information">
    <div class="sectionContent-noToolbar"></div>
</section>
<div class="sectionSeparator"></div>

You cannot apply using CSS since there is no parent selector yet. — m4n0, Nov 03 '15 at 16:35
Errr... What every means is that this is unachievable and maybe something you should keep in mind when structuring your site. CSS only work forwards and downwards, no other directions. — somethinghere, Nov 03 '15 at 16:36
If you provide the class sectionContent-noToolbar to the parent, you can do .sectionContent-noToolbar + .sectionSeparator{} (sibling selector) — FLX, Nov 03 '15 at 16:38
I wish I could but unfortunately I have no control over the HTML. :( — Neophile, Nov 03 '15 at 16:42
@TheNewbie I deleted my answer as it is out of context of the title but I think you can get to what you need using margins or padding. http://jsfiddle.net/Manojkr/q9ktf03b/ — m4n0, Nov 03 '15 at 16:43
@ManojKumar I would also like to add that there is little chance a css selector for parent elements is coming up anytime soon. It was considered, but it is too against the basics of `cascading`. — somethinghere, Nov 03 '15 at 16:45

score 2 · Answer 1 · answered Nov 03 '15 at 16:35

2

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.

answered Nov 03 '15 at 16:35

Quentin

914,110
126
1,211
1,335

Specifically, there is no parent selector in CSS. – connexo Nov 03 '15 at 16:44
For typical interpretations of selector syntax at least. selectors-4 makes this possible in theory, even though a "parent selector" (specifically, a counterpart to the child combinator that designates the parent rather than the child as the subject) is nowhere to be found in that specification either. – BoltClock Nov 03 '15 at 16:46
@BoltClock I think it was considered, but it causes an enormous amount of headaches with the conditions and ideas behind _Cascading_ Style Sheets. – somethinghere Nov 03 '15 at 16:53
1

@somethinghere: Mostly implementation concerns, which are [still in full force today](https://drafts.csswg.org/selectors-4/#profiles). Nothing to do with cascading (though at that point I'm just being pedantic...). – BoltClock Nov 03 '15 at 16:59
@BoltClock cool, I knew it was mostly a technical issue, but I personally hold the belief that they are cascading as well :) Cheers – somethinghere Nov 03 '15 at 17:00
1

BoltClock is right, it has nothing to do with the cascade. That just determines which *order* rules are applied to a given element in. The implementation issues are with the cost of matching the element in the first place. – Quentin Nov 03 '15 at 17:03
1

Indeed - though I'm starting to think that attempting to explain what cascading really means in the context of selectors (which is to say, nothing at all) is [an exercise in futility](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector/32858981#comment54592078_1014958) :( – BoltClock Nov 03 '15 at 17:18

score 0 · Answer 2 · answered Dec 16 '15 at 23:16

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.

Joshua Cook · Answer 3 · 2015-11-03T17:02:20.517

-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.

edited Nov 03 '15 at 17:02

answered Nov 03 '15 at 16:35

Joshua Cook

12,495
2
35
31

SASS and LESS will have no effect here - they are bound by the same rules as they must output the same language: CSS. – somethinghere Nov 03 '15 at 16:38
The title of the question is: "CSS selector based on a condition". SASS and LESS certainly address this. – Joshua Cook Nov 03 '15 at 16:39
1

@Joshua Cook: If CSS doesn't sufficiently address the problem, neither will any preprocessor, because as somethinghere has said, they all boil down to CSS anyway. I suspect rather than "they will have no effect" they meant to say "they will make no difference", because ultimately this hinges on the capabilities of CSS. – BoltClock Nov 03 '15 at 16:42
Nope they do not. SASS or LESS don't output css selectors based on conditions, they generate them based on conditions. The selector is still as defined by CSS as any other. But, yes @BoltClock is right, 'have no effect' might have been incorrect _phrasing_, but thats it. – somethinghere Nov 03 '15 at 16:42
Maybe I'm missing something, but these look like conditionals: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_8 – Joshua Cook Nov 03 '15 at 16:44
1

Those conditions are _unrelated_ to your html and the _output_ is still CSS, which does not allow to do conditional selection like this pseudo one: `body .classExists ? body .class { apply this; } : body .otherClass { apply other; }`. SASS and LESS work, but their end result is just like hand-written CSS. – somethinghere Nov 03 '15 at 16:45
Perhaps I should have been clearer. I find that there are multiple approaches to *answering* questions here. There is no EASY solution to this specific problem, as can be seen by the other answer: "No, it isn't." In the absence of an answer, I opted for education. OP is clearly going to need to rethink the implementation of this particular html. IMO pointing at general best practices is a GOOD thing. – Joshua Cook Nov 03 '15 at 16:55
1

Your answer implies that the tools you recommended can solve the problem, but they can't, so you've just given the OP a big red herring. This can only be done by changing the DOM (either with different HTML or by JavaScript). (The rest of your answer is also wrong, conditions along the similar lines *can* be expressed in CSS, the conditions just can't involve backtracking up the DOM tree). – Quentin Nov 03 '15 at 17:00

CSS selector based on a condition

3 Answers3

Linked

Related