CSS selector getting parent when you know the child

Question

I have the following HTML

<div id"mainDiv">
        <ul id="cat1">
        </ul>
</div>

<div id"mainDiv">
        <ul id="cat2">
        </ul>
</div>

I would like to select the "mainDiv" which has a child ul "cat1", in my CSS as I want to apply some styling on that div. But not the all maindiv's

Any ideas?

You can't have more than 1 element with the same id. So that's already invalid HTML. — putvande, Jul 25 '13 at 15:13
There is no way to select an ancestor with CSS currently. Selectors level 4 introduces the "context" of a selector which would allow this, but this is not supported by any major browser. — Explosion Pills, Jul 25 '13 at 15:13

score 1 · Answer 1 · answered Jul 25 '13 at 15:20

Your markup is invalid:

<div id"mainDiv">

should be

<div id="mainDiv">

Since duplicate ID's are invalid in HTML, your question is really invalid in this context. You should either use a class OR rethink your structure.

Example for the first div:

<div class="mainDiv firstdiv">

and subsequent divs:

<div class="mainDiv">

CSS:

.firstdif{}

put your CSS in that.

score 0 · Accepted Answer · answered Jul 25 '13 at 15:13

0

No CSS selector for this currently, so you're going to have to resort to some JavaScript/jQuery:

$('#cat2').parent().css(/* add it here */);

answered Jul 25 '13 at 15:13

SlightlyCuban

you can use the nth-child(n) psuedo selector or even first-child – Charles380 Jul 25 '13 at 15:28
Eh? How would you go about styling the parent given only the child id and `nth-child`? I thought that went down, not up. – SlightlyCuban Jul 25 '13 at 15:40
According to WC3 spec: E:nth-child(n) an E element, the n-th child of its parent – Charles380 Jul 25 '13 at 15:42
@Charles380: That gets you the child, not the parent. – BoltClock Jul 25 '13 at 15:48
@BoltClock According to WC3 CSS3 standards the nth-child(n) psuedo class does the following. The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element. – Charles380 Jul 25 '13 at 17:06
and I am realizing I must have clicked the wrong keyword because this question isn't related to HTML5/CSS3 specifically. – Charles380 Jul 25 '13 at 17:29
@Charles380: Exactly. So you're getting the child, not the parent. – BoltClock Jul 25 '13 at 17:49
@BoltClock I stand corrected I thought I was browsing the HTML5/CSS3 questions but I must have hit my html favorite keyword instead of html5 – Charles380 Jul 25 '13 at 17:55

2 Answers2