> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/is-there-a-css-parent-selector-ok.md). # Is there a CSS parent selector? (ok) https\://stackoverflow\.com/questions/1014861/is-there-a-css-parent-selector Đã ok ```

``` ## [s there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) [Ask Question](https://stackoverflow.com/questions/ask)Asked 11 years agoActive [2 days ago](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?lastactivity)Viewed 2.1m times3212467 How do I select the `

` element that is a direct parent of the anchor element? As an example, my CSS would be something like this: ``` li < a.active { property: value; } ``` Obviously there are ways of doing this with JavaScript, but I'm hoping that there is some sort of workaround that exists native to CSS Level 2. The menu that I am trying to style is being spewed out by a CMS, so I can't move the active element to the `

` element... (unless I theme the menu creation module which I'd rather not do). Any ideas?[css](https://stackoverflow.com/questions/tagged/css) [css-selectors](https://stackoverflow.com/questions/tagged/css-selectors)[share](https://stackoverflow.com/q/1014861) [improve this question](https://stackoverflow.com/posts/1014861/edit) follow [edited Jul 24 '19 at 22:14](https://stackoverflow.com/posts/1014861/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesasked Jun 18 '09 at 19:59[![](https://i.stack.imgur.com/dVXEK.jpg?s=32\&g=1)](https://stackoverflow.com/users/123415/jcuenod)[jcuenod](https://stackoverflow.com/users/123415/jcuenod)45k1212 gold badges5757 silver badges9494 bronze badges * This question is over a decade old, but if anyone is interested in a way to do this on individual clients (not on a server), I can provide an answer. Just let me know. Please remember that my answer will not work on servers, and thus will not satisfy the most common need. – [RockPaperLizard](https://stackoverflow.com/users/4182398/rockpaperlizard) [Jun 10 at 10:17](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment110185199_1014861) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#) ### 33 Answers [Active](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?answertab=active#tab-top)[Oldest](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?answertab=oldest#tab-top)[Votes](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?answertab=votes#tab-top)1[2](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?page=2\&tab=votes#tab-top)[Next](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?page=2\&tab=votes#tab-top)25655 There is currently no way to select the parent of an element in CSS. If there was a way to do it, it would be in either of the current CSS selectors specs: * [Selectors Level 3 Spec](https://www.w3.org/TR/css3-selectors/#selectors) * [CSS 2.1 Selectors Spec](https://www.w3.org/TR/CSS2/selector.html#pattern-matching) That said, the [Selectors Level 4 Working Draft](https://dev.w3.org/csswg/selectors4/#relational) includes a `:has()` pseudo-class that will provide this capability. It will be similar to the [jQuery implementation](https://api.jquery.com/has-selector/). ``` li:has(> a.active) { /* styles to apply to the li tag */ } ``` However, as of May 2020, [**this is still not supported by any browser**](https://caniuse.com/#feat=css-has). In the meantime, you'll have to resort to JavaScript if you need to select a parent element.[share](https://stackoverflow.com/a/1014958) [improve this answer](https://stackoverflow.com/posts/1014958/edit) follow [edited May 10 at 19:52](https://stackoverflow.com/posts/1014958/revisions)[![](https://www.gravatar.com/avatar/2daee1581901ea06dbb80d2c04c1a182?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/337085/roman-pushkin)[Roman Pushkin](https://stackoverflow.com/users/337085/roman-pushkin)4,51911 gold badge2929 silver badges4848 bronze badgesanswered Jun 18 '09 at 20:16[![](https://www.gravatar.com/avatar/930406543d1f290ca749ad0bae3363c5?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/392/dan-herbert)[Dan Herbert](https://stackoverflow.com/users/392/dan-herbert)85.8k4343 gold badges170170 silver badges215215 bronze badges * 69It would seem that it has already been suggested and rejected: [stackoverflow.com/questions/45004/…](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child/45530#45530) – [RobM](https://stackoverflow.com/users/83100/robm) [Oct 27 '10 at 12:22](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment4326992_1014958) * 14Looks like the [subject selector](http://dev.w3.org/csswg/selectors4/#subject) has been revisited, except by using a `!` now: `The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.` – [animuson♦](https://stackoverflow.com/users/246246/animuson) [Jan 29 '12 at 21:30](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment11365498_1014958) * 13The prepended `$` looked better for me... the appended `!` can be overlooked more easily. – [Christoph](https://stackoverflow.com/users/1047823/christoph) [Feb 13 '12 at 11:25](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment11668870_1014958) * 51Major plot twist! The Selectors 4 WD was just updated [today](http://www.w3.org/TR/2013/WD-selectors4-20130502) to exclude the subject indicator from the fast profile, which is to be used by CSS implementations. If this change remains, it means you won't be able to use the subject indicator in stylesheets anymore (unless you use add some sort of polyfill like the one described in [another answer](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector/7049832#7049832)) - you can only use it with the Selectors API and anywhere else that the complete profile may be implemented. – [BoltClock♦](https://stackoverflow.com/users/106224/boltclock) [May 2 '13 at 15:19](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment23407732_1014958) * 56Another major update: it looks like they're considering doing away with the subject selector syntax altogether and replacing it with the `:has()` pseudo everybody has come to know and love from jQuery. The latest ED has removed all references to the subject indicator, and replaced it with the `:has()` pseudo. I don't know the exact reasons, but the CSSWG held a poll some time ago and the results must have influenced this decision. It's most likely for compatibility with jQuery (so it can leverage qSA without modifications), and because the subject indicator syntax proved too confusing. – [BoltClock♦](https://stackoverflow.com/users/106224/boltclock) [May 4 '14 at 14:28](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment35959479_1014958) [show **34** more comments](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)155 I don’t think you can select the parent in CSS only. But as you already seem to have an `.active` class, it would be easier to move that class to the `li` (instead of the `a`). That way you can access both the `li` and the `a` via CSS only.[share](https://stackoverflow.com/a/1014910) [improve this answer](https://stackoverflow.com/posts/1014910/edit) follow [edited Jul 24 '19 at 22:21](https://stackoverflow.com/posts/1014910/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Jun 18 '09 at 20:08[![](https://www.gravatar.com/avatar/b589825c2122f6bff959b3c4f1356540?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/42139/jeroen)[jeroen](https://stackoverflow.com/users/42139/jeroen)86.9k2020 gold badges104104 silver badges126126 bronze badges * 4You can't shift the pseudo selector to the list item, as it is not a focusable element. He's using the :active selector, so when the anchor is active he wants the list item to be affected. List items will never be in the active state. As an aside, it's unfortunate that such a selector doesn't exist. Getting a pure CSS menu to be fully keyboard accessible seems to be impossible without it (using sibling selectors you can make submenus created using nested lists to appear, but once the list gains focus it becomes hidden again). If there are any CSS-only solutions to this particular conun – user914183 [Aug 26 '11 at 13:46](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment8656623_1014910) * 13\@Dominic Aquilina Take a look at the question, the OP is using a class, not a pseudo selector. – [jeroen](https://stackoverflow.com/users/42139/jeroen) [Aug 26 '11 at 14:34](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment8657269_1014910) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)1291 You can use [this script](https://github.com/Idered/cssParentSelector): ``` *! > input[type=text] { background: #000; } ``` This will select any parent of a text input. But wait, there's still much more. If you want, you can select a specified parent: ``` .input-wrap! > input[type=text] { background: #000; } ``` Or select it when it's active: ``` .input-wrap! > input[type=text]:focus { background: #000; } ``` Check out this HTML: ```

``` You can select that `span.help` when the `input` is active and show it: ``` .input-wrap! .help > input[type=text]:focus { display: block; } ``` There are many more capabilities; just check out the documentation of the plugin. BTW, it works in Internet Explorer.[share](https://stackoverflow.com/a/7049832) [improve this answer](https://stackoverflow.com/posts/7049832/edit) follow [edited Jul 24 '19 at 22:24](https://stackoverflow.com/posts/7049832/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Aug 13 '11 at 10:13[![](https://www.gravatar.com/avatar/744d7066bf986a560baddc548d45cb7e?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/450726/idered)[Idered](https://stackoverflow.com/users/450726/idered)1,68711 gold badge1515 silver badges1818 bronze badges * 5suppose using jquery `patent()` would be faster. This need testing, however – [Dan](https://stackoverflow.com/users/139361/dan) [Sep 22 '11 at 19:30](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment9108663_7049832) * 2\@Idered It fails when you have CSS declaration of a Selector Subject with no child selector (`#a!` alone throws an error, `#a! p` works), and so the others will not works either because of `Uncaught TypeError: Cannot call method 'split' of undefined`: see [jsfiddle.net/HerrSerker/VkVPs](http://jsfiddle.net/HerrSerker/VkVPs/) – [yunzen](https://stackoverflow.com/users/476951/yunzen) [Apr 16 '13 at 15:33](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment22886780_7049832) * 3\@HerrSerker I think #a! is an invalid selector, what should it select? – [Idered](https://stackoverflow.com/users/450726/idered) [Apr 17 '13 at 13:41](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment22921973_7049832) * 2\@Idered I don't know. The spec doesn't say it is illegal. #a! should select itself. At least their should be no error in the JavaScript – [yunzen](https://stackoverflow.com/users/476951/yunzen) [Apr 17 '13 at 15:31](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment22926612_7049832) * 5Per my comment on the accepted answer, it looks like the polyfill may be required even in the near future after all, because the subject indicator may never be implemented by browsers in CSS. – [BoltClock♦](https://stackoverflow.com/users/106224/boltclock) [May 2 '13 at 15:35](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment23408331_7049832) [show **2** more comments](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)1101 As mentioned by a couple of others, there isn't a way to style an element's parent/s using just CSS but the following works with [jQuery](http://jquery.com/): ``` $("a.active").parents('li').css("property", "value"); ``` [share](https://stackoverflow.com/a/1901332) [improve this answer](https://stackoverflow.com/posts/1901332/edit) follow [edited May 2 '13 at 5:11](https://stackoverflow.com/posts/1901332/revisions)[![](https://www.gravatar.com/avatar/c910a4e6fcc5d9053caf9a11f3bb92ca?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/1105203/alastair)[Alastair](https://stackoverflow.com/users/1105203/alastair)6,15333 gold badges3232 silver badges2929 bronze badgesanswered Dec 14 '09 at 14:51[![](https://www.gravatar.com/avatar/71b315a6f335b6d12174daf5c465b73e?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/59384/zcrar70)[zcrar70](https://stackoverflow.com/users/59384/zcrar70)2,89022 gold badges2020 silver badges1616 bronze badges * 21The `<` selector does not exist (verified using jQuery 1.7.1). – [Rob W](https://stackoverflow.com/users/938089/rob-w) [Feb 23 '12 at 17:53](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment11905003_1901332) * 6Perhaps that `<`-syntax worked in 2009 but I've updated it (for 2013). – [Alastair](https://stackoverflow.com/users/1105203/alastair) [May 2 '13 at 5:10](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment23388689_1901332) * 5Even better, use jQuery's built-in [`:has()` selector](http://api.jquery.com/has-selector/): `$("li:has(a.active)").css("property", "value");`. It reads similarly to CSS 4's proposed `!` selector. See also: [`:parent` selector](http://api.jquery.com/parent-selector/), [`.parents()` method](http://api.jquery.com/parents/), [`.parent()` method](http://api.jquery.com/parent/). – [Rory O'Kane](https://stackoverflow.com/users/578288/rory-okane) [May 8 '13 at 22:12](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment23598328_1901332) * 7And rather than using `.css("property", "value")` to style the selected elements, you should usually `.addClass("someClass")` and have in your CSS `.someClass { property: value }` ([via](http://stackoverflow.com/a/6279001/578288)). That way, you can notate the style with the full power of CSS and any preprocessors you are using. – [Rory O'Kane](https://stackoverflow.com/users/578288/rory-okane) [May 8 '13 at 22:20](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment23598503_1901332) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)1025 Yes: [`:has()`](https://developer.mozilla.org/docs/Web/CSS/:has) Browser support: [none](https://caniuse.com/#feat=css-has)[share](https://stackoverflow.com/a/48360699) [improve this answer](https://stackoverflow.com/posts/48360699/edit) follow [edited Jun 10 at 10:20](https://stackoverflow.com/posts/48360699/revisions)[![](https://i.stack.imgur.com/55DUG.jpg?s=32\&g=1)](https://stackoverflow.com/users/4182398/rockpaperlizard)[RockPaperLizard](https://stackoverflow.com/users/4182398/rockpaperlizard)3,80155 gold badges2626 silver badges5252 bronze badgesanswered Jan 20 '18 at 20:22[![](https://i.stack.imgur.com/zSd9Y.jpg?s=32\&g=1)](https://stackoverflow.com/users/806169/yukul%c3%a9l%c3%a9)[Yukulélé](https://stackoverflow.com/users/806169/yukul%c3%a9l%c3%a9)9,63888 gold badges4646 silver badges7171 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)71 There is no parent selector; just the way there is no previous sibling selector. One good reason for not having these selectors is because the browser has to traverse through all children of an element to determine whether or not a class should be applied. For example, if you wrote: ``` body:contains-selector(a.active) { background: red; } ``` Then the browser will have to wait until it has loaded and parsed everything until the `` to determine if the page should be red or not. The article [*Why we don't have a parent selector*](http://snook.ca/archives/html_and_css/css-parent-selectors) explains it in detail.[share](https://stackoverflow.com/a/21253071) [improve this answer](https://stackoverflow.com/posts/21253071/edit) follow [edited Jul 24 '19 at 22:29](https://stackoverflow.com/posts/21253071/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Jan 21 '14 at 8:43[![](https://www.gravatar.com/avatar/2f9b099fb455d3ddedb0bfa7430e51a9?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/87015/salman-a)[Salman A](https://stackoverflow.com/users/87015/salman-a)217k7676 gold badges379379 silver badges475475 bronze badges * 12so make the browser faster. the internet itself faster. this selector is definitely needed, and the reason for not implementing it is, sadly, because we live in a slow, primitive world. – [vsync](https://stackoverflow.com/users/104380/vsync) [Feb 19 '14 at 21:33](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment33152932_21253071) * 11actually, the selector would make a very fast browser look slow. – [Salman A](https://stackoverflow.com/users/87015/salman-a) [Feb 20 '14 at 4:09](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment33161895_21253071) * 6I trust that browser developers would come up with an implementation which is (at least) as fast as the javascript version, which is the one people end up using anyway. – [Marc.2377](https://stackoverflow.com/users/3258851/marc-2377) [Jun 9 '18 at 0:15](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment88547069_21253071) * "we live in a slow, primitive world" cough cough new apple watch cough cough – [Marvin](https://stackoverflow.com/users/9860982/marvin) [May 5 '19 at 19:26](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment98638412_21253071) * @Marc.2377 If you try the above example in JS on your website, I'm never going to visit it. On the other side, I'd say that most of the time, you only care about immediate children, so if it was only limited to the immediate children, it'd be a good addition without too much impact. – [xryl669](https://stackoverflow.com/users/1469714/xryl669) [Sep 7 '19 at 12:41](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment102096312_21253071) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)57 There isn't a way to do this in CSS 2. You could add the class to the `li` and reference the `a`: ``` li.active > a { property: value; } ``` [share](https://stackoverflow.com/a/1014900) [improve this answer](https://stackoverflow.com/posts/1014900/edit) follow [edited Jul 24 '19 at 22:19](https://stackoverflow.com/posts/1014900/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Jun 18 '09 at 20:06[![](https://www.gravatar.com/avatar/8aefed28dfd5e867ec01f0be654c543b?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/123234/josh)[Josh](https://stackoverflow.com/users/123234/josh)5,80011 gold badge3131 silver badges5454 bronze badges * 3by making the a element display:block you can style it to fit the whole of the li area. if you can explain what style you are looking for perhaps I could help with a solution. – [Josh](https://stackoverflow.com/users/123234/josh) [Jun 18 '09 at 21:53](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment824603_1014900) * this is actually an simple and elegant solution and, in many cases, it makes sense to set the class on the parent. – [Ricardo](https://stackoverflow.com/users/1159167/ricardo) [Mar 18 '16 at 23:17](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment59835872_1014900) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)37 Try to switch `a` to `block` display, and then use any style you want. The `a` element will fill the `li` element, and you will be able to modify its look as you want. Don't forget to set `li` padding to 0. ``` li { padding: 0; overflow: hidden; } a { display: block; width: 100%; color: ..., background: ..., border-radius: ..., etc... } a.active { color: ..., background: ... } ``` [share](https://stackoverflow.com/a/8239485) [improve this answer](https://stackoverflow.com/posts/8239485/edit) follow [edited Jul 24 '19 at 22:25](https://stackoverflow.com/posts/8239485/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Nov 23 '11 at 9:03[![](https://www.gravatar.com/avatar/a04fb23b53a4f2161b3871fd929dafa0?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/1061497/raseko)[Raseko](https://stackoverflow.com/users/1061497/raseko)37933 silver badges33 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)30 The CSS selector “[General Sibling Combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)” could maybe used for what you want: ``` E ~ F { property: value; } ``` This matches any `F` element that is preceded by an `E` element.[share](https://stackoverflow.com/a/6535953) [improve this answer](https://stackoverflow.com/posts/6535953/edit) follow [edited Aug 23 '17 at 12:27](https://stackoverflow.com/posts/6535953/revisions)[![](https://www.gravatar.com/avatar/3f8912af19fe86b7b34a0b011a962460?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/366904/cody-gray)[Cody Gray](https://stackoverflow.com/users/366904/cody-gray)♦212k4040 gold badges437437 silver badges513513 bronze badgesanswered Jun 30 '11 at 14:00[![](https://www.gravatar.com/avatar/1b5164f2623bc7aa3d53043c043691f4?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/823180/cobaasta)[cobaasta](https://stackoverflow.com/users/823180/cobaasta)56544 silver badges22 bronze badges * 25This is just sibling selector, it's not child, parent... not really answering the question mate – [Alireza](https://stackoverflow.com/users/5423108/alireza) [Jun 16 '17 at 18:08](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment76178910_6535953) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)26 Not in CSS 2 as far as I'm aware. CSS 3 has more robust selectors but is not consistently implemented across all browsers. Even with the improved selectors, I don't believe it will accomplish exactly what you've specified in your example.[share](https://stackoverflow.com/a/1014916) [improve this answer](https://stackoverflow.com/posts/1014916/edit) follow answered Jun 18 '09 at 20:09[![](https://www.gravatar.com/avatar/c43d0d59750489cf9d41adb45a8695dc?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/65714/mark-hurd)[Mark Hurd](https://stackoverflow.com/users/65714/mark-hurd)12.3k22 gold badges2323 silver badges2828 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)24 I know the OP was looking for a CSS solution but it is simple to achieve using jQuery. In my case I needed to find the `

` tag contained in the child `

`. jQuery has the `:has` selector so it's possible to identify a parent by the children it contains: ``` $("ul:has(#someId)") ``` will select the `ul` element that has a child element with id *someId*. Or to answer the original question, something like the following should do the trick (untested): ``` $("li:has(.active)") ``` [share](https://stackoverflow.com/a/16598254) [improve this answer](https://stackoverflow.com/posts/16598254/edit) follow answered May 16 '13 at 22:04[![](https://www.gravatar.com/avatar/0522928cf14459231d0588905e1ca70b?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/132599/david-clarke)[David Clarke](https://stackoverflow.com/users/132599/david-clarke)11.4k88 gold badges7777 silver badges100100 bronze badges * 3Or use `$yourSpan.closest("ul")` and you'll get the parent UL of your span element. Nevertheless your answer is completely offtopic imho. We can answer all of the CSS-taged questions with a jQuery solution. – [Robin van Baalen](https://stackoverflow.com/users/1146033/robin-van-baalen) [Jul 18 '13 at 17:40](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment25845810_16598254) * 1As identified in other answers, there is no way to do this using CSS 2. Given that constraint, the answer I provided is one I know is effective and is the simplest way to answer the question using javascript imho. – [David Clarke](https://stackoverflow.com/users/132599/david-clarke) [Dec 19 '15 at 19:27](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment56490846_16598254) * Given your upvotes, some people agree with you. But the only answer remains the accepted one; plain and simple "it cant be done the way you want it". If the question is how to archieve 60mph on a bicycle and you answer it with "simple; get in a car and hit the gas.", it's still not an answer. Hence my comment. – [Robin van Baalen](https://stackoverflow.com/users/1146033/robin-van-baalen) [Dec 19 '15 at 19:36](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment56490979_16598254) * 1That approach would make SO almost completely useless. I search SO for how to solve problems, not to find the "only answer" doesn't address the issue. That is why SO is so awesome, because there is always more than one way to skin a cat. – [David Clarke](https://stackoverflow.com/users/132599/david-clarke) [Dec 20 '15 at 18:35](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment56510094_16598254) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)24 The pseudo element `:focus-within` allows a parent to be selected if a descendent has focus. An element can be focused if it has a `tabindex` attribute. [Browser support for focus-within](http://www.caniuse.com/#feat=css-focus-within) [Tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) **Example** ``` .click { cursor: pointer; } .color:focus-within .change { color: red; } .color:focus-within p { outline: 0; } ``` ```

I will change color

Click me

``` Run code snippetExpand snippet [share](https://stackoverflow.com/a/46406959) [improve this answer](https://stackoverflow.com/posts/46406959/edit) follow [edited Mar 20 '18 at 13:36](https://stackoverflow.com/posts/46406959/revisions)[![](https://graph.facebook.com/100001384903689/picture?type=large)](https://stackoverflow.com/users/3305454/roberrrt-s)[roberrrt-s](https://stackoverflow.com/users/3305454/roberrrt-s)6,8343636 silver badges5050 bronze badgesanswered Sep 25 '17 at 13:55[![](https://i.stack.imgur.com/ZvuJE.png?s=32\&g=1)](https://stackoverflow.com/users/5561605/sol)[sol](https://stackoverflow.com/users/5561605/sol)17.6k55 gold badges2525 silver badges3939 bronze badges * 2This works fine in my case, thanks! Just a not, the example would be more ilustrative if you change the color to the parent, not to the sibling, this is replace `.color:focus-within .change` with `.color:focus-within`. In my case i'm using bootstrap nav-bar that add the class to the children when active and I want to add a class to the parent .nav-bar. I think this is a pretty common scenario where I own the markup but the component css+js is bootstrap (or other) so I cannot change the behavior. Although I can add tabindex and use this css. Thanks! – [cancerbero](https://stackoverflow.com/users/1179379/cancerbero) [Jun 29 '18 at 15:13](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment89196688_46406959) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)22 This is the most discussed aspect of the **Selectors Level 4** specification. With this, a selector will be able to style an element according to its child by using an exclamation mark after the given selector (!). For example: ``` body! a:hover{ background: red; } ``` will set a red background-color if the user hovers over any anchor. But we have to wait for browsers' implementation :([share](https://stackoverflow.com/a/30060508) [improve this answer](https://stackoverflow.com/posts/30060508/edit) follow [edited Jul 24 '19 at 22:33](https://stackoverflow.com/posts/30060508/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered May 5 '15 at 18:24[![](https://i.stack.imgur.com/wB2px.jpg?s=32\&g=1)](https://stackoverflow.com/users/1059966/marco-allori)[Marco Allori](https://stackoverflow.com/users/1059966/marco-allori)2,7682727 silver badges2222 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)21 You might try to use hyperlink as the parent, and then change the inner elements on hover. Like this: ``` a.active h1 {color:red;} a.active:hover h1 {color:green;} a.active h2 {color:blue;} a.active:hover h1 {color:yellow;} ``` This way you can change the style in multiple inner tags, based on the rollover of the parent element.[share](https://stackoverflow.com/a/9259605) [improve this answer](https://stackoverflow.com/posts/9259605/edit) follow [edited Apr 15 at 21:17](https://stackoverflow.com/posts/9259605/revisions)[![](https://i.stack.imgur.com/UIrGI.jpg?s=32\&g=1)](https://stackoverflow.com/users/2756409/tylerh)[TylerH](https://stackoverflow.com/users/2756409/tylerh)18k1212 gold badges5959 silver badges7777 bronze badgesanswered Feb 13 '12 at 11:22[![](https://i.stack.imgur.com/Rz0dD.jpg?s=32\&g=1)](https://stackoverflow.com/users/1089708/riverstorm)[riverstorm](https://stackoverflow.com/users/1089708/riverstorm)49233 silver badges77 bronze badges * 1That is correct, but limits the markup code within the `a` tag to certain elements only, if you want to conform to XHTML standards. For instance, you cannot use a `div` within `a`, without getting a warning of violating the schema. – [Ivaylo Slavov](https://stackoverflow.com/users/795158/ivaylo-slavov) [Jul 24 '12 at 18:22](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment15413755_9259605) * 2Totaly right Ivaylo! "a" is a non-block element, so can't use block elements inside it. – [riverstorm](https://stackoverflow.com/users/1089708/riverstorm) [Dec 12 '12 at 22:34](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment19066830_9259605) * 1In HTML5 it is perfectly fine to put block elements inside links. – [Matthew James Taylor](https://stackoverflow.com/users/83389/matthew-james-taylor) [Apr 6 '14 at 7:47](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment34932462_9259605) * 2... if it was semantically wrong, they wouldn't have allowed it in HTML5 where it wasn't before. – [BoltClock♦](https://stackoverflow.com/users/106224/boltclock) [Dec 28 '15 at 15:54](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment56734669_9259605) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)14 Currently there is no parent selector & it is not even being discussed in any of the talks of W3C. You need to understand how CSS is evaluated by the browser to actually understand if we need it or not. There is a lot of technical explanation here. [Jonathan Snook explains how CSS is evaluated](http://snook.ca/archives/html_and_css/css-parent-selectors). [Chris Coyier on the talks of Parent selector](http://css-tricks.com/parent-selectors-in-css/). [Harry Roberts again on writing efficient CSS selectors](http://csswizardry.com/2011/09/writing-efficient-css-selectors/). But [Nicole Sullivan has some interesting facts on positive trends](http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/). These people are all top class in the field of front end development.[share](https://stackoverflow.com/a/22559484) [improve this answer](https://stackoverflow.com/posts/22559484/edit) follow [edited Nov 2 '17 at 0:38](https://stackoverflow.com/posts/22559484/revisions)[![](https://www.gravatar.com/avatar/cfc50a32e3a3dffad460e83c0e02f6ba?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/4099598/nathan-tuggy)[Nathan Tuggy](https://stackoverflow.com/users/4099598/nathan-tuggy)2,24299 gold badges2727 silver badges3636 bronze badgesanswered Mar 21 '14 at 12:58[![](https://graph.facebook.com/640735960/picture?type=large)](https://stackoverflow.com/users/2731897/suraj-naik)[Suraj Naik](https://stackoverflow.com/users/2731897/suraj-naik)50344 silver badges77 bronze badges * 12The `need` is defined by web developers' requirements, whether to have it in the spec is decided by other factors. – [nicodemus13](https://stackoverflow.com/users/26463/nicodemus13) [May 15 '14 at 9:04](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment36368351_22559484) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)14 Just an idea for horizontal menu... #### Part of HTML ```

Link

``` Part of CSS ``` /* Hide parent backgrounds... */ .parent-background { display: none; } /* ... and show it when hover on children */ .item:hover + .parent-background { display: block; position: absolute; z-index: 10; top: 0; width: 100%; } ``` [Updated demo and the rest of code](https://jsfiddle.net/ilyabogdanov/4fyxywee/) [Another example](https://jsfiddle.net/ilyabogdanov/o4fkL7kv/) how to use it with text-inputs - select parent fieldset[share](https://stackoverflow.com/a/33375213) [improve this answer](https://stackoverflow.com/posts/33375213/edit) follow [edited Jun 20 at 9:12](https://stackoverflow.com/posts/33375213/revisions)[![](https://www.gravatar.com/avatar/a007be5a61f6aa8f3e85ae2fc18dd66e?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/-1/community)[Community](https://stackoverflow.com/users/-1/community)♦111 silver badgeanswered Oct 27 '15 at 17:55[![](https://www.gravatar.com/avatar/2f7e421bfb406f8bff3eb6d2b8ab59bd?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/5323976/ilya-b)[Ilya B.](https://stackoverflow.com/users/5323976/ilya-b)87277 silver badges1313 bronze badges * 3It's not at all clear to me how you mean to generalize this to some/many/most of the parent selector use cases, or even exactly which parts of this CSS are doing what. Can you add a thorough explanation? – [Nathan Tuggy](https://stackoverflow.com/users/4099598/nathan-tuggy) [Oct 28 '15 at 7:57](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment54563814_33375213) * 2I did not try to apply this to real world scenarios, that is why I say "Not for production". But I think It can be applied to 2-level menu only with fixed item width. "which parts of this CSS are doing what" - .test-sibling here is actually background of parent item (the last line of CSS). – [Ilya B.](https://stackoverflow.com/users/5323976/ilya-b) [Oct 28 '15 at 8:08](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment54564103_33375213) * 2Added explanation (css section of jsfiddle, starting from "MAIN PART")... And I was mistaken - there may be any number of sublevels. – [Ilya B.](https://stackoverflow.com/users/5323976/ilya-b) [Oct 28 '15 at 12:59](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment54574805_33375213) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)141 Here's a hack using `pointer-events` with `hover`: ```

``` Run code snippetExpand snippet [share](https://stackoverflow.com/a/51623130) [improve this answer](https://stackoverflow.com/posts/51623130/edit) follow [edited Jul 26 '19 at 1:59](https://stackoverflow.com/posts/51623130/revisions)answered Jul 31 '18 at 22:47[![](https://www.gravatar.com/avatar/a4509b3b039ef1b38ae52ea58f45f78b?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/5921548/jan-kyu-peblik)[Jan Kyu Peblik](https://stackoverflow.com/users/5921548/jan-kyu-peblik)94088 silver badges1414 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)12 There's a plugin that extends CSS to include some non-standard features that can really help when designing websites. It's called [EQCSS](http://elementqueries.com/). One of the things EQCSS adds is a parent selector. It works in all browsers, Internet Explorer 8 and up. Here's the format: ``` @element 'a.active' { $parent { background: red; } } ``` So here we've opened an element query on every element `a.active`, and for the styles inside that query, things like `$parent` make sense, because there's a reference point. The browser can find the parent, because it's very similar to `parentNode` in JavaScript. [Here's a demo of `$parent`](http://elementqueries.com/demos/parent.html) and [another `$parent` demo that works in Internet Explorer 8](http://staticresource.com/parent.html), as well as [a screenshot in case you don't have Internet Explorer 8 around to test with](https://i.imgur.com/QyVAj2u.png). EQCSS also includes [meta-selectors](http://elementqueries.com/#meta-selectors): `$prev` for the element before a selected element and `$this` for only those elements that match an element query, and more.[share](https://stackoverflow.com/a/36483708) [improve this answer](https://stackoverflow.com/posts/36483708/edit) follow [edited Jul 24 '19 at 22:43](https://stackoverflow.com/posts/36483708/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Apr 7 '16 at 17:52[![](https://www.gravatar.com/avatar/d2ddf71464b997e71ddb17c1812285b9?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/641558/innovati)[innovati](https://stackoverflow.com/users/641558/innovati)49111 gold badge77 silver badges1212 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)11 It's now 2019, and the [latest draft of the CSS Nesting Module](https://drafts.csswg.org/css-nesting-1/) actually has something like this. Introducing `@nest` at-rules. > 3.2. The Nesting At-Rule: @nest > > While direct nesting looks nice, it is somewhat fragile. Some valid nesting selectors, like .foo &, are disallowed, and editing the selector in certain ways can make the rule invalid unexpectedly. As well, some people find the nesting challenging to distinguish visually from the surrounding declarations. > > To aid in all these issues, this specification defines the @nest rule, which imposes fewer restrictions on how to validly nest style rules. Its syntax is: > > `@nest = @nest { }` > > The @nest rule functions identically to a style rule: it starts with a selector, and contains declarations that apply to the elements the selector matches. The only difference is that the selector used in a @nest rule must be nest-containing, which means it contains a nesting selector in it somewhere. A list of selectors is nest-containing if all of its individual complex selectors are nest-containing. (Copy and pasted from the URL above). Example of valid selectors under this specification: ``` .foo { color: red; @nest & > .bar { color: blue; } } /* Equivalent to: .foo { color: red; } .foo > .bar { color: blue; } */ .foo { color: red; @nest .parent & { color: blue; } } /* Equivalent to: .foo { color: red; } .parent .foo { color: blue; } */ .foo { color: red; @nest :not(&) { color: blue; } } /* Equivalent to: .foo { color: red; } :not(.foo) { color: blue; } */ ``` [share](https://stackoverflow.com/a/55243057) [improve this answer](https://stackoverflow.com/posts/55243057/edit) follow [edited Jun 20 at 9:12](https://stackoverflow.com/posts/55243057/revisions)[![](https://www.gravatar.com/avatar/a007be5a61f6aa8f3e85ae2fc18dd66e?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/-1/community)[Community](https://stackoverflow.com/users/-1/community)♦111 silver badgeanswered Mar 19 '19 at 14:14[![](https://graph.facebook.com/100001384903689/picture?type=large)](https://stackoverflow.com/users/3305454/roberrrt-s)[roberrrt-s](https://stackoverflow.com/users/3305454/roberrrt-s)6,8343636 silver badges5050 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)10 Technically there is no direct way to do this. However, you can sort that out with either jQuery or JavaScript. However, you can do something like this as well. ``` a.active h1 {color: blue;} a.active p {color: green;} ``` **jQuery** ``` $("a.active").parents('li').css("property", "value"); ``` If you want to achieve this using jQuery here is the reference for the [jQuery parent selector](http://www.snoopcode.com/jquery/jquery-parent-selector).[share](https://stackoverflow.com/a/33122477) [improve this answer](https://stackoverflow.com/posts/33122477/edit) follow [edited Jul 24 '19 at 22:36](https://stackoverflow.com/posts/33122477/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Oct 14 '15 at 10:08[![](https://i.stack.imgur.com/m5oZi.jpg?s=32\&g=1)](https://stackoverflow.com/users/2200417/prabhakar-undurthi)[Prabhakar Undurthi](https://stackoverflow.com/users/2200417/prabhakar-undurthi)5,29011 gold badge3434 silver badges4242 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)9 The W3C excluded such a selector because of the huge performance impact it would have on a browser.[share](https://stackoverflow.com/a/7073683) [improve this answer](https://stackoverflow.com/posts/7073683/edit) follow answered Aug 16 '11 at 4:43[![](https://www.gravatar.com/avatar/fdded0fcd9a7017fc7afd7935a51c5b7?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/738957/rgb)[rgb](https://stackoverflow.com/users/738957/rgb)1,04811 gold badge99 silver badges1212 bronze badges * 27false. because the DOM is a tree, they have to go to the parent before getting to the child, so the simply just go back one node. o.o – [NullVoxPopuli](https://stackoverflow.com/users/356849/nullvoxpopuli) [Nov 10 '11 at 16:56](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment9906983_7073683) * 9CSS selectors are a [queue](http://www.snook.ca/archives/html_and_css/css-parent-selectors) so [selector order](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/) is evaluated rather than the document XPath or DOM hierarchy. – [Paul Sweatte](https://stackoverflow.com/users/1113772/paul-sweatte) [Aug 18 '12 at 16:14](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment16039188_7073683) * 3\@rgb At least that's what they told us. – [yunzen](https://stackoverflow.com/users/476951/yunzen) [Apr 16 '13 at 15:35](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment22886876_7073683) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)9 The short answer is **NO**; we don't have a `parent selector` at this stage in CSS, but if you don't have to swap the elements or classes anyway, the second option is using JavaScript. Something like this: ``` var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active')); activeATag.map(function(x) { if(x.parentNode.tagName === 'LI') { x.parentNode.style.color = 'red'; // Your property: value; } }); ``` Or a shorter way if you use **jQuery** in your application: ``` $('a.active').parents('li').css('color', 'red'); // Your property: value; ``` [share](https://stackoverflow.com/a/44595469) [improve this answer](https://stackoverflow.com/posts/44595469/edit) follow [edited Jul 24 '19 at 22:45](https://stackoverflow.com/posts/44595469/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Jun 16 '17 at 18:06[![](https://i.stack.imgur.com/WtfBG.png?s=32\&g=1)](https://stackoverflow.com/users/5423108/alireza)[Alireza](https://stackoverflow.com/users/5423108/alireza)73.7k1818 gold badges223223 silver badges145145 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)5 Although there is no parent selector in standard CSS at present, I am working on a (personal) project called **axe** (ie. *Augmented CSS Selector Syntax / ACSSSS*) which, among its 7 new selectors, includes both: 1. an *immediate parent* selector `<` (which enables the opposite selection to `>`) 2. an *any ancestor selector* `^` (which enables the opposite selection to `[SPACE]`) **axe** is presently in a relatively early BETA stage of development. See a demo here: (compare the two lists on the left styled with standard selectors and the two lists on the right styled with axe selectors)[share](https://stackoverflow.com/a/42318093) [improve this answer](https://stackoverflow.com/posts/42318093/edit) follow [edited Feb 18 '17 at 17:19](https://stackoverflow.com/posts/42318093/revisions)answered Feb 18 '17 at 17:06[![](https://i.stack.imgur.com/STmqq.jpg?s=32\&g=1)](https://stackoverflow.com/users/3897775/rounin)[Rounin](https://stackoverflow.com/users/3897775/rounin)17.3k33 gold badges3838 silver badges5757 bronze badges * 3The project is in an early Beta stage at present. You can (at least currently) activate axe selectors in your CSS styles by including `` at the very end of your html document, just before ``. – [Rounin](https://stackoverflow.com/users/3897775/rounin) [Jul 12 '17 at 16:40](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment77099842_42318093) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)4 At least up to and including CSS 3 you cannot select like that. But it can be done pretty easily nowadays in JavaScript, you just need to add a bit of vanilla JavaScript, notice that the code is pretty short. ``` cells = document.querySelectorAll('div'); [].forEach.call(cells, function (el) { //console.log(el.nodeName) if (el.hasChildNodes() && el.firstChild.nodeName=="A") { console.log(el) }; }); ``` ```

Peter

Jackson link

Philip

Pullman link

``` Run code snippetExpand snippet [share](https://stackoverflow.com/a/48564882) [improve this answer](https://stackoverflow.com/posts/48564882/edit) follow [edited Jul 24 '19 at 22:50](https://stackoverflow.com/posts/48564882/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Feb 1 '18 at 14:18[![](https://i.stack.imgur.com/vUFRO.png?s=32\&g=1)](https://stackoverflow.com/users/1577343/eduard-florinescu)[Eduard Florinescu](https://stackoverflow.com/users/1577343/eduard-florinescu)11.7k2525 gold badges9393 silver badges158158 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)4 > > Any ideas? CSS 4 will be fancy if it adds some *hooks* into *walking backwards*. Till then it is possible (though **not** advisable) to use `checkbox` and/or `radio` *`input`s* to *break* the usual way that things are connected, and through that also allow CSS to operate outside of its normal scope... ``` /* Hide things that may be latter shown */ .menu__checkbox__selection, .menu__checkbox__style, .menu__hidden { display: none; visibility: hidden; opacity: 0; filter: alpha(opacity=0); /* Old Microsoft opacity */ } /* Base style for content and style menu */ .main__content { background-color: lightgray; color: black; } .menu__hidden { background-color: black; color: lightgray; /* Make list look not so _listy_ */ list-style: none; padding-left: 5px; } .menu__option { box-sizing: content-box; display: block; position: static; z-index: auto; } /* ▼ - \u2630 - Three Bars */ /* .menu__trigger__selection::before { content: '\2630'; display: inline-block; } */ /* ▼ - Down Arrow */ .menu__trigger__selection::after { content: "\25BC"; display: inline-block; transform: rotate(90deg); } /* Customize to look more `select` like if you like */ .menu__trigger__style:hover, .menu__trigger__style:active { cursor: pointer; background-color: darkgray; color: white; } /** * Things to do when checkboxes/radios are checked */ .menu__checkbox__selection:checked + .menu__trigger__selection::after, .menu__checkbox__selection[checked] + .menu__trigger__selection::after { transform: rotate(0deg); } /* This bit is something that you may see elsewhere */ .menu__checkbox__selection:checked ~ .menu__hidden, .menu__checkbox__selection[checked] ~ .menu__hidden { display: block; visibility: visible; opacity: 1; filter: alpha(opacity=100); /* Microsoft!? */ } /** * Hacky CSS only changes based off non-inline checkboxes * ... AKA the stuff you cannot unsee after this... */ .menu__checkbox__style[id="style-default"]:checked ~ .main__content { background-color: lightgray; color: black; } .menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] { color: darkorange; } .menu__checkbox__style[id="style-one"]:checked ~ .main__content { background-color: black; color: lightgray; } .menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] { color: darkorange; } .menu__checkbox__style[id="style-two"]:checked ~ .main__content { background-color: darkgreen; color: red; } .menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] { color: darkorange; } ``` ```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Theme

Default Style
First Alternative Style
Second Alternative Style

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

``` Run code snippetExpand snippet ... pretty *gross*, but with just CSS and HTML it is possible to touch and re-touch anything but the `body` and `:root` from just about anywhere by linking the `id` and `for` properties of `radio`/`checkbox` *`input`s* and `label` *triggers*; likely someone'll show how to re-touch those at some point. > One additional caveat is that only **one** `input` of a specific `id` maybe used, first `checkbox`/`radio` *wins* a toggled state in other words... **But** multiple labels can all point to the same `input`, though that would make both the HTML and CSS look even grosser. > > > ... I'm hoping that there is some sort of workaround that exists native to CSS Level 2... I am not sure about the other `:` selectors, but I `:checked` for pre-CSS 3. If I remember correctly, it was something like `[checked]` which is why you may find it in the above code, for example, ``` .menu__checkbox__selection:checked ~ .menu__hidden, .menu__checkbox__selection[checked] ~ .menu__hidden { /* rules: and-stuff; */ } ``` ... but for things like `::after` and `:hover`, I'm not at all certain in which CSS version those first appeared. That all stated, please don't ever use this in production, not even in anger. As a joke sure, or in other words just because something *can* be done does not always mean it *should*.[share](https://stackoverflow.com/a/56504080) [improve this answer](https://stackoverflow.com/posts/56504080/edit) follow [edited Jul 24 '19 at 23:02](https://stackoverflow.com/posts/56504080/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Jun 8 '19 at 6:31[![](https://www.gravatar.com/avatar/bf6114b3072f3fd075698d514a5d1c05?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/2632107/s0ands0)[S0AndS0](https://stackoverflow.com/users/2632107/s0ands0)57111 gold badge44 silver badges1111 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)3 No, you cannot select the parent in CSS only. But as you already seem to have an `.active` class, it would be easier to move that class to the `li` (instead of the `a`). That way you can access both the `li` and the `a` via CSS only.[share](https://stackoverflow.com/a/33964885) [improve this answer](https://stackoverflow.com/posts/33964885/edit) follow [edited Jul 24 '19 at 22:40](https://stackoverflow.com/posts/33964885/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Nov 27 '15 at 21:16[![](https://www.gravatar.com/avatar/8deac61652bc91eb94011288e6b185ef?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/4119808/gaurav-aggarwal)[Gaurav Aggarwal](https://stackoverflow.com/users/4119808/gaurav-aggarwal)8,34055 gold badges2323 silver badges5757 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)1 Changing parent element based on child element can currently only happen when we have an `` element inside the parent element. When an input gets focus, its corresponding parent element can get affected using CSS. Following example will help you understand using `:focus-within` in CSS. ``` .outer-div { width: 400px; height: 400px; padding: 50px; float: left } .outer-div:focus-within { background: red; } .inner-div { width: 200px; height: 200px; float: left; background: yellow; padding: 50px; } ``` ```

I want to change outer-div(Background color) class based on inner-div. Is it possible?

``` Run code snippetExpand snippet [share](https://stackoverflow.com/a/56897698) [improve this answer](https://stackoverflow.com/posts/56897698/edit) follow [edited Jul 7 '19 at 0:56](https://stackoverflow.com/posts/56897698/revisions)[![](https://i.stack.imgur.com/SeKjY.png?s=32\&g=1)](https://stackoverflow.com/users/10637444/vfdan)[VFDan](https://stackoverflow.com/users/10637444/vfdan)74566 silver badges2222 bronze badgesanswered Jul 5 '19 at 6:34[![](https://i.stack.imgur.com/huDhN.png?s=32\&g=1)](https://stackoverflow.com/users/10887749/sethuraman)[Sethuraman](https://stackoverflow.com/users/10887749/sethuraman)52033 silver badges1313 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)1 It's possible with ampersand in [Sass](http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29): ``` h3 font-size: 20px margin-bottom: 10px .some-parent-selector & font-size: 24px margin-bottom: 20px ``` CSS output: ``` h3 { font-size: 20px; margin-bottom: 10px; } .some-parent-selector h3 { font-size: 24px; margin-bottom: 20px; } ``` [share](https://stackoverflow.com/a/45491793) [improve this answer](https://stackoverflow.com/posts/45491793/edit) follow [edited Jul 24 '19 at 22:47](https://stackoverflow.com/posts/45491793/revisions)[![](https://i.stack.imgur.com/RIZKi.png?s=32\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)26.2k2121 gold badges9090 silver badges120120 bronze badgesanswered Aug 3 '17 at 18:19[![](https://i.stack.imgur.com/f9FFZ.jpg?s=32\&g=1)](https://stackoverflow.com/users/1102037/rodolfo-jorge-nemer-nogueira)[Rodolfo Jorge Nemer Nogueira](https://stackoverflow.com/users/1102037/rodolfo-jorge-nemer-nogueira)3,87922 gold badges2828 silver badges2626 bronze badges * 2it's true, but only if you know the selector in advance. – [Shahar](https://stackoverflow.com/users/1423874/shahar) [Aug 9 '17 at 8:02](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment78128637_45491793) * 11This does **not** select `h3`'s parent, which was the goal. This would select `h3`s which are descendants of `.some-parent-selector`. – [Jacob Ford](https://stackoverflow.com/users/1489243/jacob-ford) [Mar 25 '19 at 12:41](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment97401179_45491793) [add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)1 I'd hire some JavaScript code to do that. For example, in React when you iterate over an array, add another class to the parent component, which indicates it contains your children: ```

{kiddos.map(kid =>

)}

``` And then simply: ``` .parent { color: #000; } .parent.has-kiddos { color: red; } ``` [share](https://stackoverflow.com/a/56576349) [improve this answer](https://stackoverflow.com/posts/56576349/edit) follow [edited Jan 2 at 15:41](https://stackoverflow.com/posts/56576349/revisions)answered Jun 13 '19 at 8:25[![](https://i.stack.imgur.com/dpl7T.jpg?s=32\&g=1)](https://stackoverflow.com/users/4060922/damiano)[Damiano](https://stackoverflow.com/users/4060922/damiano)87422 gold badges1010 silver badges2222 bronze badges[add a comment](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#)0 There no css (and therefore in css preprocessors) parent selector due to "The major reasons for the CSS Working Group previously rejecting proposals for parent selectors are related to browser performance and incremental rendering issues."[share](https://stackoverflow.com/a/60007225) [improve this answer](https://stackoverflow.com/posts/60007225/edit) follow