Ascendancy Selection in CSS

Question

I was just wondering anyone had any info on something that I may well have just made up in my own head...

Whilst working away tonight I was looking at styling up a filtering system for a product category listing, and whilst looking at the following code found a bit of an issue that someone might be able to suggest a solution to.

<label>
    <input type='checkbox' id='test_id' name='test_name' value='test_value'/>
    Test
</label>

Once I began working on the style I thought wouldn't it be great to be able to style that label based on the pseudo-selector

#test_check_id:checked PARENT_ELEMENT

where PARENT_ELEMENT would be the next ascendant element of the input in question.

In this way I could drop in style to give better feedback as to what the user has decided on for filtering constraints.

I realise I "could" do this with javascript and css, and in fact that kinda seems like the only way to provide this in my head right now after a little searching for an answer, but I just wondered if anyone can shed any more light on the subject for me. Feel free to LMGTFY if I've missed something glaringly obvious.

Cheers!

You can generally turn this around and use the descendant selector - see http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors. It's not so much "Who's your Daddy" as "Which of my children have shown up here then?" — dash, Jan 30 '12 at 21:27
That post seems to be about descendency actually. Not quite sure how I could necessarily turn that around. The CSS spec(s) don't have the hover pseudo selector for a label, so if I want this to conform to standards that route would seem to be out too. — BizNuge, Jan 30 '12 at 22:06
Yes - but in your original question, you start off with a child and then try and apply a style based on the parent/ancestor. You could instead have a pattern that matches all children of your label when a certain condition is met - that's all I meant by turning it around - hope I didn't misunderstand! So something like label > #test_check_id:checked for example - http://www.w3.org/TR/CSS2/selector.html — dash, Jan 30 '12 at 22:08
@dash No. I think you did understand man. I think it's just that I'm asking for something that doesn't exist. The real problem seems to be I'm trying to apply a style to something I cannot select. ie. the parent element of a pseudo selection. Think I'll just have to do it lo-fi and jquery it. Shame this functionality doesn't exist really. — BizNuge, Jan 30 '12 at 22:39

score 2 · Answer 1 · answered Jan 30 '12 at 21:27

2

If you wrapped the text in a tag, e.g:

<label>
    <input type='checkbox' id='test_id' name='test_name' value='test_value'/>
    <span>Test</span>
</label>

You could style it using the sibling selector:

input:checked + span {
    color: red;
}

answered Jan 30 '12 at 21:27

pjumble

16,880
6
43
51

This wouldn't be terribly helpful though, since then I'd have to push the input into some kind of absolute position if I were to apply any kind of style encapsulation such as a border/background combo to the span. Far from perfect solution for my application, but I guess it might be useful in certain situations. – BizNuge Jan 30 '12 at 22:44

Ege · Accepted Answer · 2012-01-30T22:31:14.427

You can't, unless you're using something like less or sass. CSS only allows descendant selectors because of its reverse architecture.

So when you write "li a" the browser will bring up all the "a" elements in the entire page, and then select&serve you the ones that is a descendant of a "li" element.

That's also why most people are giving classes and id's to almost every element on the page. Because, theoretically, it will be much faster to grab 5 elements with a class than grabbing all 40 divs in a page. But I really have no idea on how significant that boost actually is.

I guess the easiest solution for this would be to toggle classes of the parents based on the input by using JS.

More on descendancy: I think this limitation is about the DOM itself, where you can track the opening and closing of tags but not the other way around. Think about it this way:

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

If I wanted to select the ascendant of the third div, it wouldn't be able to differentiate between which div is its ascendant. So in order to do that you would need to track which Nth child is the current element. Now imagine doing that to every element with a child on a page. That would severely hurt the performance.

that's actually quite an elegant description of the problem, from the point of view of a rendering engine. Guess a regex to do that amount of looking back would be fairly spectacular, or incredibly unpossible... Nice concise example! cheers! — BizNuge, Jan 30 '12 at 22:41
Sorry to have not clciked answered for a while. looked into less in more detail, in conjunction with Twitter Bootstrap actually, and I can see the point of treating descendancy entriely differently to ASCendency from a browser vendor perspective I think. Good "sort of" answer Ege. Didn't answer my question entirely because what I asked was kind of incorrect or indirect in the first place from my new point of view. Cheers! — BizNuge, Feb 13 '12 at 23:27

Ascendancy Selection in CSS

2 Answers2