css :target on children

Question

Suppose we have this html

<div class="a">
   <div>...</div>
   ...
   <div id="b">xyz</div>
</div>


<div class="a">
   <div>...</div>
   ...
   <div id="c">abc</div>
</div>

Applying some style on #b upon targeting it in url is easy to do with the css :target selector. Is it possible to apply some some style on the parent div with class="a" as well?

No for the simple reason that [there is no way to select the parent yet](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). — BoltClock, Mar 13 '13 at 10:32
@Bigood: In case you don't understand what `:target` does, http://www.w3.org/TR/css3-selectors/#target-pseudo — BoltClock, Mar 13 '13 at 10:54

score 1 · Accepted Answer · answered Mar 13 '13 at 10:33

1

No, since you would need a CSS parent selector for that. Nothing in CSS2 and CSS3 has been specified for that. CSS4 does have (a somewhat) parent selector (called the subject selector) using the ! symbol, but no browser supports it (yet).

answered Mar 13 '13 at 10:33

MarcoK

5,952
2
26
40

score 0 · Answer 2 · answered Mar 13 '13 at 10:33

0

You can add an extra id to your <div class="a"> and make it:

<div class="a" id="abc">

...and still use the :target.

answered Mar 13 '13 at 10:33

otinanai

3,769
2
21
42

1

Yeah but that would cause the URL fragment to point to this element and not the other one, which may or may not be desirable if the child must have the ID or some other behavior might be affected, e.g. scrolling or scripts. – BoltClock Mar 13 '13 at 10:33
That will only work if the URL fragment is `#abc` and not `#b`. At least it does offer the benefit of being able to style `#abc:target #b`, but it affects the URL (and possibly any links on the page pointing to it). – BoltClock Mar 13 '13 at 15:45

score 0 · Answer 3 · answered Mar 13 '13 at 10:44

No, CSS cascades (CSS = Cascading Style Sheets), it doesn't go up. You will need to explicitly apply styling to the parent element.

You would be better doing something like @otinanai suggested and adding a class to your child divs. e.g.

HTML

<div class="a">
   <div>...</div>
   ...
   <div class="aItem" id="b">xyz</div>
</div>

<div class="a">
   <div>...</div>
   ...
   <div class="aItem" id="c">abc</div>
</div>

CSS

.a {
    border: 1px solid #000;
}
.aItem {
    color: #999;
}

So you will use classes to consistently style your elements. Otherwise you will have to write CSS for D, E, F G through to Z, and only use the ID's for bookingmarking/URL purposes.

css :target on children

3 Answers3