Css: Select Previous Sibling

Is there a previous sibling selector?

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.

CSS select previous sibling

No CSS doesn't have a previous sibling selector but you can use ~ selector -

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:

/* default link color is blue */

.parent a {

  color: blue;

}

/* prev siblings should be red */

.parent:hover a {

  color: red;

}

.parent a:hover,

.parent a:hover ~ a {

  color: blue;

}

<div class="parent">

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

</div>

CSS select all previous siblings for a star rating

// obtain all spans from DOM
const spans = document.querySelectorAll('span');
// set a variable at global scope as indicator
let flag = false; 

// add event listener to each span
spans.forEach((sp, j)=>{
    sp.addEventListener('click', ()=>{
    // if clicked, then not dismissing the background colour after mouse leave
    flag = true;
    // reassign all spans back to original grey
    spans.forEach(dsp=>{
        dsp.style.backgroundColor = '#eee';
    });
    // assign bg to red of the spans from 0 to clicked index
    Array.from(new Array(j+1), (x, i) => i).forEach(ind=>{
        spans[ind].style.backgroundColor = 'red';
    });
  });
    // redo if mouse enters
    sp.addEventListener('mouseenter', ()=>{
    flag = false;
  });
    // if any span is hovered
    sp.addEventListener('mouseover', ()=>{
    // reassign all spans back to original grey
    spans.forEach(dsp=>{
        dsp.style.backgroundColor = '#eee';
    });
    // assign bg to red of the spans from 0 to clicked index
    Array.from(new Array(j+1), (x, i) => i).forEach(ind=>{
        spans[ind].style.backgroundColor = 'red';
    });
  });
  // in moseleave, only save the background colour if click happened
  sp.addEventListener('mouseleave', ()=>{
    if(!flag){
      spans.forEach(dsp=>{
        dsp.style.backgroundColor = '#eee';
      });
    }
  });
});

span {
  display:inline-block;
  width: 32px;
  height: 32px;
  background-color:#eee;
}

span:hover {
  background-color:red;
  opacity: 0.8;
  cursor: pointer;
}

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

Targeting Previous Sibling Element CSS

There is no 'previous sibling' selector. Your solution should be to make sure you are applying the classes to the parent element.

Your HTML should look like this:

<div class="off-canvas-wrapper is-off-canvas-open is-open-right">
  <header class="header scrolled" role="banner"></header>
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>

Another option is to move the header below the off-canvas-wrapper-inner so you can target it as the next sibling (using +).

The current W3 spec draft also includes a :has pseudoselector. When fully supported we can solve this problem with the following selector: .previous-class:has(+ .next-class)

CSS selector for having previous sibling of

CSS doesn't have a 'previous element' selector yet.

Since you want to select the ol that immediately follows another element, use +, it will select only the specified element that immediately follows the former specified element.

In your case

[ng-list] + ol {
    /* css rules */
}

Ref: 5.7 Adjacent sibling selectors

Is it possible to sibling upwards in 2022?

It's the same issue as with a parent selector, CSS can only see DOWN the DOM not back up. As in it can only see future siblings, children, children of children etc.

Safari I think has implemented the :has() pseudo class in one of their dev versions but they are a small browser and Chrome has yet to implement anything.

You might get duped as a few questions on here, this is probably a useful one:
Is there a CSS parent selector?

Kevin Powell has a great video
https://www.youtube.com/watch?v=2-xdcDsqsAs

There is no parent and before sibling css selector so what I'm supposed to do?

The javascript is pretty straightforward. Give the anchor you want an id (I've called it 'hoverme')

<section>
  <div>On a hover change css here</div>
  <a id="hoverme">Hover me</a>
</section>

Add a class to cover styling the div (e.g. this)

<style>
  .hoverdiv {
    color:red;
  }
</style>

Then just add a couple of event listeners to the anchor at the window.onload event like this:

<script>
  window.addEventListener('load', (event) => {
    const anchor=document.querySelector('#hoverme');
    anchor.addEventListener('mouseover', (event) => {
      event.target.parentElement.querySelector('div').classList.add('hoverdiv');
    });
    anchor.addEventListener('mouseout', (event) => {
      event.target.parentElement.querySelector('div').classList.remove('hoverdiv');
    });
  });
</script>

CSS - Selecting Previous Sibling

The adjacent sibling selector + and general sibling selector ~ can only select elements following after the first referenced element. In your HTML, you are trying to select an element that comes BEFORE the referenced element.

There is no "previous" sibling selector in the CSS spec. You'll need to use javascript in this case, or find another element to use to reference your #next_prayer div.

With jQuery, you can achieve this functionality:

$('div.prayers_lower').hover(
    function() {
        $(this).prev().animate({ height: "30%" });
}, function() {
        $(this).prev().animate({ height: "auto" });
});