Is there a previous sibling selector

Question

The plus sign     is for the next sibling   Is there an equivalent for the previous sibling

User · Answer

Two tricks  Basically inverting the HTML order of your desired elements in HTML and using   Next siblings operator   float-right   inverse the order of HTML elements   x000D   x000D  div     Do with the parent whatever you know just to make the x000D    inner float-right elements appear where desired    x000D    display inline-block  x000D    x000D  span  x000D    float right      float-right the elements     x000D    x000D  span hover   span     On hover target it s  previous    elements    x000D    background red  x000D     x000D   lt div gt  x000D     lt  -- Reverse the order of inner elements -- gt  x000D     lt span gt 5 lt  span gt  x000D     lt span gt 4 lt  span gt  x000D     lt span gt 3 lt  span gt  x000D     lt span gt 2 lt  span gt  x000D     lt span gt 1 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D      Parent with direction  rtl    inverse the order of inner elements   x000D   x000D   inverse  x000D    direction  rtl  x000D    display  inline-block     inline-block to keep parent at the left of window    x000D    x000D  span hover   span     On hover target it s  previous    elements    x000D    background gold  x000D    x000D  Hover one span and see the previous elements being targeted  lt br gt  x000D   x000D   lt div class  inverse  gt  x000D     lt  -- Reverse the order of inner elements -- gt  x000D     lt span gt 5 lt  span gt  x000D     lt span gt 4 lt  span gt  x000D     lt span gt 3 lt  span gt  x000D     lt span gt 2 lt  span gt  x000D     lt span gt 1 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

No  It is not possible via CSS  It takes the  Cascade  to heart  -      However  if you are able to add JavaScript to your page  a little bit of jQuery could get you to your end goal  You can use jQuery s find to perform a  look-ahead  on your target element class id  then backtrack to select your target  Then you use jQuery to re-write the DOM  CSS  for your element   Based on this answer by Mike Brant  the following jQuery snippet could help      p   ul   prev  p     This first selects all  lt ul gt s that immediately follow a  lt p gt   Then it  backtracks  to select all the previous  lt p gt s from that set of  lt ul gt s   Effectively   previous sibling  has been selected via jQuery  Now  use the  css function to pass in your CSS new values for that element     In my case I was looking to find a way to select a DIV with the id  full-width  but ONLY if it had a  indirect  descendant DIV with the class of  companies   I had control of all the HTML under  companies  but could not alter any of the HTML above it  And the cascade goes only 1 direction  down   Thus I could select ALL  full-widths  Or I could select  companies that only followed a  full-width  But I could not select only  full-widths that proceeded  companies   And  again  I was unable to add  companies any higher up in the HTML   That part of the HTML was written externally  and wrapped our code   But with jQuery  I can select the required  full-widths  then assign the appropriate style         full-width   find   companies   parents   full-width   css   width    300px       This finds all  full-width  companies  and selects just those  companies  similar to how selectors are used to target specific elements in standard in CSS  Then it uses  parents to  backtrack  and select ALL parents of  companies  but filters those results to keep only  fill-width elements  so that in the end  it only selects a  full-width element if it has a  companies class descendant  Finally  it assigns a new CSS  width  value to the resulting element    x000D   x000D      parent   find   change-parent   parents   parent   css   background-color    darkred    x000D  div   x000D    background-color  lightblue  x000D    width  120px  x000D    height  40px  x000D    border  1px solid gray  x000D    padding  5px  x000D    x000D   wrapper   x000D    background-color  blue  x000D    width  250px  x000D    height  165px  x000D    x000D   parent   x000D    background-color  green  x000D    width  200px  x000D    height  70px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D   lt div class  wrapper  gt  x000D   x000D     lt div class  parent  gt  x000D       parent  turns red x000D       lt div class  change-parent  gt  x000D      descendant   change-parent  x000D       lt  div gt  x000D     lt  div gt  x000D     x000D     lt div class  parent  gt  x000D       parent  stays green x000D       lt div class  nope  gt  x000D      descendant   nope  x000D       lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D  Target  lt b gt   lt span style  color darkgreen  gt parent lt  span gt   lt  b gt  to turn  lt span style  color red  gt red lt  span gt   lt br gt  x000D   lt b gt Only lt  b gt  if it  lt b gt has lt  b gt  a descendant of  change-parent   lt br gt  x000D   lt br gt  x000D   reverse cascade  look ahead  parent un-descendant  x000D   lt  html gt  x000D   x000D   x000D    jQuery Reference Docs      or jQuery    DOM element   find  Get the descendants of each element in the current set of matched elements  filtered by a selector  jQuery object  or element   parents  Get the immediately preceding sibling of each element in the set of matched elements  If a selector is provided  it retrieves the previous sibling only if it matches that selector  filters the results to only include the listed elements selectors    css  Set one or more CSS properties for the set of matched elements

User · Answer

Depending on your exact objective  there is a way to achieve the usefulness of a parent selector without using one  even if one were to exist      Say we have    lt div gt     lt ul gt       lt li gt  lt a gt Pants lt  a gt  lt  li gt       lt li gt  lt a gt Socks lt  a gt  lt  li gt       lt ul gt         lt li gt  lt a gt White socks lt  a gt  lt  li gt         lt li gt  lt a gt Blue socks lt  a gt  lt  li gt       lt  ul gt     lt  ul gt   lt  div gt    What can we do to make the Socks block  including sock colours  stand out visually using spacing   What would be nice but doesn t exist   ul li ul parent     margin-top  15px    margin-bottom  15px      What does exist   li  gt  a     margin-top  15px    display  block    li  gt  a only-child     margin-top  0px      This sets all anchor links to have 15px margin on the top and resets it back to 0 for those with no UL elements  or other tags  inside LIs

User · Answer

is for the next sibling  Is there an equivalent for the previous   sibling    You can use the two axe selectors    and    There are 2 subsequent sibling selectors in conventional CSS      is the immediate subsequent sibling selector   is the any subsequent sibling selector   In conventional CSS  there is no previous sibling selector   However  in the axe CSS post-processor library  there are 2 previous sibling selectors      is the immediate previous sibling selector  opposite of      is the any previous sibling selector  opposite of      Working Example   In the example below     any-subsequent hover   div selects any subsequent div  immediate-subsequent hover   div selects the immediate subsequent div  any-previous hover   div selects any previous div  immediate-previous hover   div selects the immediate previous div    x000D   x000D  div   x000D    display  inline-block  x000D    width  60px  x000D    height  100px  x000D    color  rgb 255  255  255   x000D    background-color  rgb 255  0  0   x000D    text-align  center  x000D    vertical-align  top  x000D    cursor  pointer  x000D    opacity  0  x000D    transition  opacity 0 6s ease-out  x000D    x000D   x000D  code   x000D    display  block  x000D    margin  4px  x000D    font-size  24px  x000D    line-height  24px  x000D    background-color  rgba 0  0  0  0 5   x000D    x000D   x000D  div nth-of-type -n 4    x000D    background-color  rgb 0  0  255   x000D    x000D   x000D  div nth-of-type n 3  nth-of-type -n 6    x000D    opacity  1  x000D    x000D   x000D   any-subsequent hover   div  x000D   immediate-subsequent hover   div  x000D   any-previous hover   div  x000D   immediate-previous hover   div   x000D    opacity  1  x000D    x000D   lt h2 gt Hover over any of the blocks below lt  h2 gt  x000D   x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   x000D   lt div class  immediate-previous  gt Hover for  lt code gt   lt  code gt  selector lt  div gt  x000D   lt div class  any-previous  gt Hover for  lt code gt   lt  code gt  selector lt  div gt  x000D   lt div class  any-subsequent  gt Hover for  lt code gt   lt  code gt  selector lt  div gt  x000D   lt div class  immediate-subsequent  gt Hover for  lt code gt   lt  code gt  selector lt  div gt  x000D   x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   x000D   lt script src  https   rouninmedia github io axe axe js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You can rearrange the html  set the container to either flex or grid  and also set for each child the  quot order quot  property so it will look as you want

User · Answer

Consider the order property of flex and grid layouts   I ll focus on flexbox in the examples below  but the same concepts apply to Grid     With flexbox  a previous sibling selector can be simulated   In particular  the flex order property can move elements around the screen   Here s an example      You want element A to turn red when element B is hovered    lt ul gt       lt li gt A lt  li gt       lt li gt B lt  li gt   lt  ul gt     STEPS   Make the ul a flex container   ul   display  flex          Reverse the order of siblings in the mark-up    lt ul gt      lt li gt B lt  li gt      lt li gt A lt  li gt   lt  ul gt        Use a sibling selector to target Element A     or   will do     li hover   li   background-color  red          Use the flex order property to restore the order of siblings on the visual display   li last-child   order  -1            and voil    A previous sibling selector is born  or at least simulated    Here s the full code    x000D   x000D  ul   x000D      display  flex  x000D    x000D   x000D  li hover   li   x000D      background-color  red  x000D    x000D   x000D  li last-child   x000D      order  -1  x000D    x000D   x000D     non-essential decorative styles    x000D  li   x000D      height  200px  x000D      width  200px  x000D      background-color  aqua  x000D      margin  5px  x000D      list-style-type  none  x000D      cursor  pointer  x000D    x000D   lt ul gt  x000D       lt li gt B lt  li gt  x000D       lt li gt A lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    From the flexbox spec      5 4  Display Order  the order property      Flex items are  by default  displayed and laid out in the same order as they appear in the source document  The    order property can be used to change this ordering       The order property controls the order in which flex items appear within the flex container  by assigning them to ordinal groups  It takes a single  lt integer gt  value  which specifies which ordinal group the flex item    belongs to    The initial order value for all flex items is 0   Also see order in the CSS Grid Layout spec     Examples of  previous sibling selectors  created with the flex order property    x000D   x000D   container   display  flex    x000D   x000D   box5   order  1        x000D   box5 hover    box4   background-color  orangered  font-size  1 5em    x000D   x000D   box6   order  -4    x000D   box7   order  -3    x000D   box8   order  -2    x000D   box9   order  -1    x000D   box9 hover    not  box12  nth-child -1n 5    background-color  orangered  x000D                                                font-size  1 5em    x000D   box12   order  2    x000D   box12 hover    nth-last-child -1n 2    background-color  orangered  x000D                                          font-size  1 5em    x000D   box21   order  1    x000D   box21 hover    box   background-color  orangered  font-size  1 5em    x000D   x000D     non-essential decorative styles    x000D   container   x000D      padding  5px  x000D      background-color   888  x000D    x000D   box   x000D      height  50px  x000D      width  75px  x000D      margin  5px  x000D      background-color  lightgreen  x000D      display  flex  x000D      justify-content  center  x000D      align-items  center  x000D      text-align  center  x000D      cursor  pointer  x000D    x000D   lt p gt  x000D  Using the flex  lt code gt order lt  code gt  property to construct a previous sibling selector x000D   lt  p gt  x000D   x000D   lt div class  container  gt  x000D       lt div class  box box1  gt  lt span gt 1 lt  span gt  lt  div gt  x000D       lt div class  box box2  gt  lt span gt 2 lt  span gt  lt  div gt  x000D       lt div class  box box3  gt  lt span gt 3 lt  span gt  lt  div gt  x000D       lt div class  box box5  gt  lt span gt HOVER ME lt  span gt  lt  div gt  x000D       lt div class  box box4  gt  lt span gt 4 lt  span gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt br gt  x000D   x000D   lt div class  container  gt  x000D       lt div class  box box9  gt  lt span gt HOVER ME lt  span gt  lt  div gt  x000D       lt div class  box box12  gt  lt span gt HOVER ME lt  span gt  lt  div gt  x000D       lt div class  box box6  gt  lt span gt 6 lt  span gt  lt  div gt  x000D       lt div class  box box7  gt  lt span gt 7 lt  span gt  lt  div gt  x000D       lt div class  box box8  gt  lt span gt 8 lt  span gt  lt  div gt  x000D       lt div class  box box10  gt  lt span gt 10 lt  span gt  lt  div gt  x000D       lt div class  box box11  gt  lt span gt 11 lt  span gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt br gt  x000D   x000D   lt div class  container  gt  x000D       lt div class  box box21  gt  lt span gt HOVER ME lt  span gt  lt  div gt  x000D       lt div class  box box13  gt  lt span gt 13 lt  span gt  lt  div gt  x000D       lt div class  box box14  gt  lt span gt 14 lt  span gt  lt  div gt  x000D       lt div class  box box15  gt  lt span gt 15 lt  span gt  lt  div gt  x000D       lt div class  box box16  gt  lt span gt 16 lt  span gt  lt  div gt  x000D       lt div class  box box17  gt  lt span gt 17 lt  span gt  lt  div gt  x000D       lt div class  box box18  gt  lt span gt 18 lt  span gt  lt  div gt  x000D       lt div class  box box19  gt  lt span gt 19 lt  span gt  lt  div gt  x000D       lt div class  box box20  gt  lt span gt 20 lt  span gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    jsFiddle    A Side Note  ndash  Two Outdated Beliefs about CSS  Flexbox is shattering long-held beliefs about CSS   One such belief is that a previous sibling selector is not possible in CSS   To say this belief is widespread would be an understatement  Here s a sampling of related questions on Stack Overflow alone    Select the preceding sibling of an element in CSS using selectors CSS  select previous sibling CSS select previous sibling Previous adjacent selector in CSS Select previous siblings on hover CSS selector to get preceding sibling Change color of sibling elements on hover using CSS How to select the previous sibling using selenium css syntax CSS Selector for selecting an element that comes BEFORE another element  How to add styling to active input  39 s previous sibling using CSS only CSS selector for next and previous elements How to affect other elements when a div is hovered   As described above  this belief is not entirely true  A previous sibling selector can be simulated in CSS using the flex order property   The z-index Myth  Another long-standing belief has been that z-index works only on positioned elements   In fact  the most current version of the spec  ndash  the W3C Editor s Draft  ndash  still asserts this to be true      9 9 1 Specifying the stack level  the z-index   property      z-index         Value       auto      inherit   Initial     auto   Applies to       positioned elements   Inherited       no   Percentages     N A   Media       visual   Computed value      as specified          emphasis added    In reality  however  this information is obsolete and inaccurate   Elements that are flex items or grid items can create stacking contexts even when position is static      4 3  Flex Item Z-Ordering      Flex items paint exactly the same as inline blocks  except that order-modified document order is used in place of raw    document order  and z-index values other than auto create a stacking context even if position is static       5 4  Z-axis Ordering  the z-index property      The painting order of grid items is exactly the same as inline blocks  except that order-modified document order is    used in place of raw document order  and z-index values other than auto create a stacking context even if    position is static     Here s a demonstration of z-index working on non-positioned flex items  https   jsfiddle net m0wddwxs

User · Answer

There isn t  and there is  If you must place the label before the input  just place the label after the input and keep both the label  amp  the input inside a div  and style the div as following    x000D   x000D   input-box     display  flex    flex-direction  column-reverse    x000D   lt div class  input-box  gt     lt input    id  email     class  form-item                  gt       lt label for  email  class  form-item-header  gt                       E-Mail                        lt  label gt   lt  div gt  x000D   x000D   x000D   Now you can apply the standard next sibling styling options available in css  and it will appear like you are using a previous sibling styling

User · Answer

There is no official way to do that at the moment but you can use a little trick to achieve this   Remember that it is experimental and it has some limitation      check this link if you worries about navigator compatibility    What you can do is use a CSS3 selector   the pseudo classe called nth-child     x000D   x000D   list gt     x000D    display  inline-block  x000D    padding  20px 28px  x000D    margin-right  5px  x000D    border  1px solid  bbb  x000D    background   ddd  x000D    color   444  x000D    margin  0 4em 0  x000D    x000D   x000D   list  nth-child -n 4    x000D    color   600b90  x000D    border  1px dashed red  x000D    background  orange  x000D    x000D   lt p gt The oranges elements are the previous sibling li selected using li nth-child -n 4  lt  p gt  x000D   x000D   lt div id  list  gt  x000D     lt span gt 1 lt  span gt  lt  -- this will be selected -- gt  x000D     lt p gt 2 lt  p gt  lt  -- this will be selected -- gt  x000D     lt p gt 3 lt  p gt  lt  -- this will be selected -- gt  x000D     lt div gt 4 lt  div gt  lt  -- this will be selected -- gt  x000D     lt div gt 5 lt  div gt  x000D     lt p gt 6 lt  p gt  x000D     lt p gt 7 lt  p gt  x000D     lt p gt 8 lt  p gt  x000D     lt p gt 9 lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Limitations   You can t select previous elements based on the classes of the next elements This is the same for pseudo classes

User · Answer

If you know the exact position an  nth-child  -based exclusion of all following siblings would work   ul li not  nth-child n 3     Which would select all lis before the 3rd  e g  1st and 2nd   But  in my opinion this looks ugly and has a very tight usecase   You also could select the nth-child right-to-left   ul li nth-child -n 2    Which does the same

User · Answer

There is no  previous  sibling selector unfortunately  but you can possibly still get the same effect by using positioning  e g  float right   It depends on what you are trying to do   In my case  I wanted a primarily CSS 5-star rating system  I would need to color  or swap the icon of  the previous stars  By floating each element right  I am essentially getting the same effect  the html for the stars thus must be written  backwards     I m using FontAwesome in this example and swapping between the unicodes of fa-star-o and fa-star http   fortawesome github io Font-Awesome   CSS    fa       display  inline-block      font-family  FontAwesome      font-style  normal      font-weight  normal      line-height  1      -webkit-font-smoothing  antialiased      -moz-osx-font-smoothing  grayscale        set all stars to  empty star      stars-container       display  inline-block                 set all stars to  empty star      stars-container  star       float  right      display  inline-block      padding  2px      color  orange      cursor  pointer       stars-container  star before       content    f006      fontAwesome empty star code          set hovered star to  filled star      star hover before      content    f005      fontAwesome filled star code          set all stars after hovered to filled star      it will appear that it selects all after due to positioning     star hover    star before       content    f005      fontAwesome filled star code        HTML                                                                                                        40        JSFiddle  http   jsfiddle net andrewleyva 88j0105g

User · Answer

I had the same question  but then I had a  duh  moment    Instead of writing  x   y   write   y   x   Obviously this matches  x  instead of  y   but it answers the  is there a match   question  and simple DOM traversal may get you to the right element more efficiently than looping in javascript   I realize that the original question was a CSS question so this answer is probably completely irrelevant  but other Javascript users may stumble on the question via search like I did

User · Answer

I had this same problem  while I was trying to change prepend icon fill color on input focus  my code looked something like this   lt template  append gt       lt b-input-group-text gt  lt strong class  quot text-danger quot  gt   lt  strong gt  lt  b-input-group-text gt   lt  template gt   lt b-form-input id  quot password confirmation quot  v-model  quot form password confirmation quot  type  quot password quot  placeholder  quot Repeat password quot  autocomplete  quot new-password quot    gt   The problem was that I m using a vue-bootstrap slot to inject the prepend  so even if i change the location still get rendered after the input Well my solution was to swipe their location  and add custom prepend and used   symbol  as css doesn t support previous sibling   lt div class  quot form-input-prepend quot  gt       lt svg-vue icon  quot common lock quot    gt   lt  div gt   lt b-form-input id  quot password confirmation quot  v-model  quot form password confirmation quot  type  quot password quot  placeholder  quot Repeat password quot  autocomplete  quot new-password quot    gt   Scss style  form-control focus    form-input-prepend       svg path           fill   accent           So just try to change its position  and if necessary use css order or position  absolute  to achieve what you want  and to avoid using javascript for this kind of needs

User · Answer

Selectors level 4 introduces  has    previously the subject indicator    which will allow you to select a previous sibling with   previous has   next           but at the time of writing  it is some distance beyond the bleeding edge for browser support

User · Answer

I found a way to style all previous siblings  opposite of    that may work depending on what you need   Let s say you have a list of links and when hovering on one  all the previous ones should turn red  You can do it like this    x000D   x000D     default link color is blue    x000D   parent a   x000D    color  blue  x000D    x000D   x000D     prev siblings should be red    x000D   parent hover a   x000D    color  red  x000D    x000D   parent a hover  x000D   parent a hover   a   x000D    color  blue  x000D    x000D   lt div class  parent  gt  x000D     lt a href     gt link lt  a gt  x000D     lt a href     gt link lt  a gt  x000D     lt a href     gt link lt  a gt  x000D     lt a href     gt link lt  a gt  x000D     lt a href     gt link lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

here is the link for a similar question CSS select all previous siblings for a star rating So I post my solution using bits of everyones responses and anyone can use it as reference and possibliy recommend improvements   x000D   x000D     Just to check input value    Consts const starRadios   document querySelectorAll  input name  rating          EventListeners starRadios forEach  radio    gt  radio addEventListener  change   getStarRadioValue        Get star radio value function getStarRadioValue event         alert event target value          Do something with it    x000D   star-rating     font-size  1 5rem    unicode-bidi  bidi-override    direction  rtl    text-align  left     star-rating editable label hover     cursor  pointer     star-rating editable  icon-star hover   star-rating editable  icon-star hover    icon-star     background-color   fb2727  important      icon-star     position  relative    background-color   72747d    width  32px    height  32px    display  inline-block    transition  background-color 0 3s ease     icon-star filled     background-color   fb2727      icon-star  gt  label     display  inline-block    width  100     height  100     left  0    top  0    position  absolute      icon-star  gt  label  gt  input type  radio       position  absolute    top  0    left  0    transform  translateY 50   translateX 50      display  none    x000D   lt div class  star-rating editable  gt     lt span class  icon-star  gt       lt label gt         lt input type  radio  name  rating   value  5    gt       lt  label gt     lt  span gt     lt span class  icon-star  gt       lt label gt         lt input type  radio  name  rating  value  4    gt       lt  label gt     lt  span gt     lt span class  icon-star  gt       lt label gt         lt input type  radio  name  rating  value  3    gt       lt  label gt     lt  span gt     lt span class  icon-star  gt       lt label gt         lt input type  radio  name  rating  value  2    gt       lt  label gt     lt  span gt     lt span class  icon-star  gt       lt label gt         lt input type  radio  name  rating   value  1    gt       lt  label gt     lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

I needed a solution to select the previous sibling tr  I came up with this solution using React and Styled-components  This is not my exact solution  This is from memory  hours later   I know there is a flaw in the setHighlighterRow function   OnMouseOver a row will set the row index to state  and rerender the previous row with a new background color   class ReactClass extends Component     constructor         this state            highlightRowIndex  null              setHighlightedRow    index    gt        const highlightRowIndex   index     null   null   index - 1      this setState  highlightRowIndex           render         return           lt Table gt           lt Tbody gt              arr map  row  index    gt                    const isHighlighted   index     this state highlightRowIndex                 return                        lt Trow                          isHighlighted  isHighlighted                          onMouseOver       gt  this setHighlightedRow index                           onMouseOut       gt  this setHighlightedRow null                            gt                                                   lt  Trow gt                                              lt  Tbody gt             lt  Table gt               const Trow   styled tr       amp  td           background-color    p   gt  p isHighlighted    red     white                amp  hover           background-color  red

User · Answer

No  there is no  previous sibling  selector   On a related note    is for general successor sibling  meaning the element comes after this one  but not necessarily immediately after  and is a CSS3 selector    is for next sibling and is CSS2 1   See Adjacent sibling combinator from Selectors Level 3 and 5 7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1  CSS 2 1  Specification

User · Answer

I had a similar problem and found out that all problem of this nature can be solved as follows    give all your items a style  give your selected item a style  give next items a style using   or      and this way you ll be able to style your current  previous items all items overridden with current and next items  and your next items   example      all items  will be styled as previous     li     color  blue        the item i want to distinguish    li milk     color  red        next items    li   li      color  green       lt ul gt     lt li gt Tea lt  li gt     lt li class  milk  gt Milk lt  li gt     lt li gt Juice lt  li gt     lt li gt others lt  li gt   lt  ul gt    Hope it helps someone

User · Answer

Removing the styles of next siblings on hover  so that it looks like only previous siblings have styles added on hover   x000D   x000D  ul li     color  red    cursor  pointer     ul hover li     color  blue     ul hover li hover   li    color  red    x000D   lt ul gt       lt li gt item 1 lt  li gt       lt li gt item 2 lt  li gt       lt li gt item 3 lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

Don t think there s a similar answer here so try this  Assuming HTML of   lt ul gt     lt li gt before lt  li gt     lt li class  quot target quot  gt target lt  li gt     lt li gt after lt  li gt     lt li gt after lt  li gt   lt  ul gt   Add a style to all the children  then undo the style to the target  and sibling children of your target  ul  gt  li   color  red    ul  gt  li target  ul  gt  li target   li   color  inherit

User · Answer

You could use double negation SELECTOR not  SELECTOR FILTER  not  SELECTOR FILTER   SELECTOR           Replace SELECTOR with either the TAG or  CLASS   Using  ID is probably too specific    Replace FILTER with some other  PSUEDO-SELECTOR  I ve only tried  hover  or  CLASS  More for toggling through Javascript   Since the typical usage will probably rely upon hovering  See example that follows     Effect only limited when hovering    TAG CLASS not TAG CLASS hover  not TAG CLASS hover   TAG CLASS        Effect only applied when hovering    PARENT CLASS hover  gt  CHILD CLASS not CHILD CLASS hover  not CHILD CLASS hover   CHILD CLASS       x000D   x000D     Solution    div parent hover  gt  div child not  hover  not  hover    child         background-color red      border-radius 1 5em    div parent hover  gt  div child not  hover  not  hover    child   gt  div       background-color yellow        Make pretty  kinda     div parent     width 9em    height 9em       Layout      display grid    grid-template-columns   auto auto auto    grid-template-rows   auto auto auto    div child        Dimensions      height 3em    width 3em       Layout      position relative       Cursor      cursor  pointer       Presentation      border  1px black solid    border-radius 1 5em     star        Dimensions      width  2 5em    height  2 5em       Placement      position absolute    top  50     left  50     transform translate -50  -50         Geometry      -webkit-clip-path  polygon      50  0       63  38       100  38       69  59       82  100       50  75       18  100       31  59       0  38       37  38         clip-path  polygon      50  0       63  38       100  38       69  59       82  100       50  75       18  100       31  59       0  38       37  38            Presentation      background-color  lightgrey    div child hover          Presentation        background-color yellow      border-radius 1 5em    div child hover  gt  div star          Presentation        background-color red    x000D   lt div class  parent  gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt     lt div class  child  href     gt  lt div class  star  gt  lt  div gt  lt  div gt    lt  div gt  x000D   x000D   x000D

User · Answer

Another flexbox solution  You can use inverse the order of elements in HTML  Then besides using order as in Michael B s answer you can use flex-direction  row-reverse  or flex-direction  column-reverse  depending on your layout   Working sample    x000D   x000D   flex   x000D    display  flex  x000D    flex-direction  row-reverse  x000D        Align content at the  reversed  end i e  beginning    x000D    justify-content  flex-end  x000D    x000D   x000D     On hover target its  previous  elements    x000D   flex-item hover    flex-item   x000D    background-color  lime  x000D    x000D   x000D     styles just for demo    x000D   flex-item   x000D    background-color  orange  x000D    color  white  x000D    padding  20px  x000D    font-size  3rem  x000D    border-radius  50   x000D    x000D   lt div class  flex  gt  x000D     lt div class  flex-item  gt 5 lt  div gt  x000D     lt div class  flex-item  gt 4 lt  div gt  x000D     lt div class  flex-item  gt 3 lt  div gt  x000D     lt div class  flex-item  gt 2 lt  div gt  x000D     lt div class  flex-item  gt 1 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Is there a "previous sibling" selector?

`float-right` + inverse the order of HTML elements

Parent with `direction: rtl;` + inverse the order of inner elements

Examples related to css

Examples related to css-selectors

[css] Is there a "previous sibling" selector?

float-right + inverse the order of HTML elements

Parent with direction: rtl; + inverse the order of inner elements

Examples related to css

Examples related to css-selectors

`float-right` + inverse the order of HTML elements

Parent with `direction: rtl;` + inverse the order of inner elements