Is there a CSS parent selector

Question

How do I select the  lt li gt  element that is a direct parent of the anchor element   As an example  my CSS would be something like this   li  lt  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  lt li gt  element     unless I theme the menu creation module which I d rather not do    Any ideas

User · Answer

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.

User · Answer

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  Tabindex  Example   x000D   x000D   click   x000D    cursor  pointer  x000D    x000D   x000D   color focus-within  change   x000D    color  red  x000D    x000D   x000D   color focus-within p   x000D    outline  0  x000D    x000D   lt div class  color  gt  x000D     lt p class  change  tabindex  0  gt  x000D      I will change color x000D     lt  p gt  x000D     lt p class  click  tabindex  1  gt  x000D      Click me x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  lt ul gt  parent tag for a  lt span gt  tag contained in the child  lt li gt   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

User · Answer

In CSS  we can cascade to the properties down the hierarchy but not in the oppostite direction  To modify the parent style on child event  probably use jQuery    el closest   parent   css  prop   value

User · Answer

Yes   has    Browser support  none

User · Answer

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

User · Answer

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   an immediate parent selector  lt   which enables the opposite selection to  gt   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   x000D   x000D   parent     float  left    width  180px    height  180px    margin-right  12px    background-color  rgb 191  191  191       child     width  90px    height  90px    margin  45px    background-color  rgb 255  255  0       child using-axe  lt   parent     background-color  rgb 255  0  0     x000D   lt div class  parent  gt     lt div class  child  gt  lt  div gt   lt  div gt    lt div class  parent  gt     lt div class  child using-axe  gt  lt  div gt   lt  div gt     lt script src  https   rouninmedia github io axe axe js  gt  lt  script gt  x000D   x000D   x000D   In the example above  lt  is the immediate parent selector  so   child using-axe  lt   parent  means   any immediate parent of  child using-axe which is  parent  You could alternatively use    child using-axe  lt  div  which would mean   any immediate parent of  child using-axe which is a div

User · Answer

There s a plugin that extends CSS to include some non-standard features that can really help when designing websites  It s called EQCSS   One of the things EQCSS adds is a parent selector  It works in all browsers  Internet nbsp Explorer nbsp 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 and another  parent demo that works in Internet nbsp Explorer nbsp 8  as well as a screenshot in case you don t have Internet nbsp Explorer nbsp 8 around to test with   EQCSS also includes meta-selectors   prev for the element before a selected element and  this for only those elements that match an element query  and more

User · Answer

Currently there is no parent selector  amp  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   Chris Coyier on the talks of Parent selector   Harry Roberts again on writing efficient CSS selectors   But Nicole Sullivan has some interesting facts on positive trends   These people are all top class in the field of front end development

User · Answer

The CSS selector    General Sibling Combinator    could maybe used for what you want   E   F       property  value      This matches any F element that is preceded by an E element

User · Answer

There isn t a way to do this in CSS nbsp 2  You could add the class to the li and reference the a   li active  gt  a       property  value

User · Answer

Changing parent element based on child element can currently only happen when we have an  lt input gt  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    x000D   x000D   outer-div   x000D    width  400px  x000D    height  400px  x000D    padding  50px  x000D    float  left x000D    x000D   x000D   outer-div focus-within   x000D    background  red  x000D    x000D   x000D   inner-div   x000D    width  200px  x000D    height  200px  x000D    float  left  x000D    background  yellow  x000D    padding  50px  x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  inner-div  gt  x000D      I want to change outer-div Background color  class based on inner-div  Is it possible  x000D       lt input type  text  placeholder  Name    gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    lt div className   parent   hasKiddos    has-kiddos          gt       kiddos map kid   gt   lt div key  kid id    gt     lt  div gt    And then simply    parent       color   000      parent has-kiddos       color  red

User · Answer

Just an idea for horizontal menu    Part of HTML  lt div class  list  gt     lt div class  item  gt       lt a gt Link lt  a gt     lt  div gt     lt div class  parent-background  gt  lt  div gt     lt  -- submenu takes this place -- gt   lt  div gt   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 Another example how to use it with text-inputs - select parent fieldset

User · Answer

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  lt  body gt  to determine if the page should be red or not   The article Why we don t have a parent selector explains it in detail

User · Answer

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

User · Answer

Try this    This solution uses plain CSS1 with no Javascript and works in all browsers  old and new  When clicked  the child anchor tag activates its active pseudo-class event  It then simply hides itself  allowing the active event to bubble up to the parent li tag who then restyles himself and reveals his anchor child again with a new style  The child has styled the parent  Using your example   lt ul gt       lt li class  quot listitem quot  gt           lt a class  quot link quot  href  quot   quot  gt This is a Link lt  a gt       lt  li gt   lt  ul gt   Now apply these styles with the active pseudo-class on a to restyle the parent li tag when the link is clicked  a link       display  inline-block      color  white      background-color  green      text-decoration  none      padding  5px     li listitem       display  inline-block      margin  0      padding  0      background-color  transparent        When this  active  pseudo-class event below fires on click  it hides itself  triggering the active event again on its parent which applies new styles to itself and its child      a link active       display  none      listitem active       background-color  blue      listitem active a link       display  inline-block      background-color  transparent     You should see the link with a green background now change to the list item s blue background on click   turns to  on click

User · Answer

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

User · Answer

At least up to and including CSS nbsp 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    x000D   x000D  cells   document querySelectorAll  div    x000D     forEach call cells  function  el    x000D        console log el nodeName  x000D      if  el hasChildNodes    amp  amp  el firstChild nodeName   A     x000D          console log el  x000D         x000D      x000D   lt div gt Peter lt  div gt  x000D   lt div gt  lt a href     gt Jackson link lt  a gt  lt  div gt  x000D   lt div gt Philip lt  div gt  x000D   lt div gt  lt a href     gt Pullman link lt  a gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here s a hack using pointer-events with hover   x000D   x000D   lt  doctype html gt   lt html gt       lt head gt           lt title gt  lt  title gt           lt style gt     accessory     parent       width  200px      height  200px      background  gray     parent    selector       display  flex      justify-content  center      align-items  center     selector       cursor  pointer      background  silver      width  50       height  50              lt  style gt           lt style gt     pertinent     parent       background  gray      pointer-events  none     parent hover       background  fuchsia     parent   selector       pointer-events  auto             lt  style gt       lt  head gt       lt body gt           lt div class  parent  gt               lt div class  selector  gt  lt  div gt           lt  div gt       lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

It s now 2019  and the latest draft of the CSS Nesting Module 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  amp   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  lt selector gt     lt declaration-list gt    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  amp   gt   bar       color  blue           Equivalent to      foo   color  red        foo  gt   bar   color  blue          foo     color  red     nest  parent  amp        color  blue           Equivalent to      foo   color  red        parent  foo   color  blue          foo     color  red     nest  not  amp         color  blue           Equivalent to      foo   color  red        not  foo    color  blue

User · Answer

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

User · Answer

You can use this script       gt  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   gt  input type text    background   000      Or select it when it s active    input-wrap   gt  input type text  focus   background   000      Check out this HTML    lt div class  input-wrap  gt       lt input type  text  class  Name   gt       lt span class  help hide  gt Your name sir lt  span gt   lt  div gt    You can select that span help when the input is active and show it    input-wrap   help  gt  input type text  focus   display  block      There are many more capabilities  just check out the documentation of the plugin   BTW  it works in Internet nbsp Explorer

User · Answer

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

User · Answer

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

User · Answer

The W3C excluded such a selector because of the huge performance impact it would have on a browser

User · Answer

Any ideas   CSS4 will be fancy if it adds some hooks into walking backwards  Until then it is possible  though not advisable  to use checkbox and or radio inputs to break the usual way that things are connected  and through that also allow CSS to operate outside of its normal scope     x000D   x000D     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         amp  9660  -  u2630 - Three Bars        menu  trigger  selection  before     content    2630     display  inline-block            amp  9660  - 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    x000D   lt  --   This bit works  but will one day cause troubles    but truth is you can stick checkbox radio inputs   just about anywhere and then call them by id with   a  for  label  Keep scrolling to see what I mean -- gt   lt input type  radio         name  colorize         class  menu  checkbox  style         id  style-default  gt   lt input type  radio         name  colorize         class  menu  checkbox  style         id  style-one  gt   lt input type  radio         name  colorize         class  menu  checkbox  style         id  style-two  gt     lt div class  main  content  gt      lt p class  paragraph  split  gt      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    lt  p gt      lt input type  checkbox           class  menu  checkbox  selection           id  trigger-style-menu  gt     lt label for  trigger-style-menu           class  menu  trigger  selection  gt  Theme lt  label gt      lt ul class  menu  hidden  gt       lt li class  menu  option  gt         lt label for  style-default               class  menu  trigger  style  gt Default Style lt  label gt       lt  li gt        lt li class  menu  option  gt         lt label for  style-one               class  menu  trigger  style  gt First Alternative Style lt  label gt       lt  li gt        lt li class  menu  option  gt         lt label for  style-two               class  menu  trigger  style  gt Second Alternative Style lt  label gt       lt  li gt     lt  ul gt      lt p class  paragraph  split  gt      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     lt  p gt    lt  div gt  x000D   x000D   x000D       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 inputs 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 pseudo classes  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

User · Answer

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

User · Answer

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 CSS 2 1 Selectors Spec  That said  the Selectors Level 4 Working Draft includes a  has   pseudo-class that will provide this capability  It will be similar to the jQuery implementation  li has  gt  a active       styles to apply to the li tag       However  as of 2020  this is still not supported by any browser  In the meantime  you ll have to resort to JavaScript if you need to select a parent element

User · Answer

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

User · Answer

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      a active   parents  li   css  property    value

[javascript] Is there a CSS parent selector?

Examples related to javascript

Examples related to css

Examples related to css-selectors