Select the Preceding Sibling of an Element in CSS Using Selectors

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.

Select the preceding sibling of an element in CSS using selectors

This is not possible with pure CSS...

Get preceding sibling for CSS selector

You can't do parent element selection with css selectors in vba (you are looking at a parent child relationship, not sibling). CSS cascades down. Additionally, there is something called specificity which comes into play.

You need to write a selector which targets what you want or switch to selenium and use xpath (though not sure how much functionality is supported in selenium basic xpath implementation). I show an appropriate two CSS selector methods below and an XPath option.

You can use the same principle of attribute and $ operator and target the src

[src$='xls.png']

So,

Set list = html.querySelectorAll("[src$='xls.png']")
Debug.Print list.item(0).src

You could also use:

img[title=Excel]

---

Using xpath and selenium basic to find parents

Option Explicit
Public Sub GetParents()
    Dim d As WebDriver, elements As Object, element As Object
    Set d = New ChromeDriver
    Const URL = "https://www.jpx.co.jp/markets/public/short-selling/index.html"
    With d
        .get URL

        Set elements = .FindElementsByXPath("//img[@title='Excel']/parent::a")
        For Each element In elements
            Debug.Print element.Attribute("href")
        Next
         Stop
        .Quit
    End With
End Sub

CSS selector to get preceding sibling

Without knowing any more of your selectors, you could potentially use CSS's :not() selector.

div:not(#box1), div:not(#box2) {
    /*some style here*/
}

I would just suggest giving your #element-to-find a class as well when you select box2 and have a style ready for it.

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 - 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" });
});

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>

Selector for subsequent sibling of element containing specific item

No

Because there is no method of selecting UP the DOM...yet.

There is, under CSS3, no parent selector or previous sibling selector.

CSS4 offers the :has selector in which case you would be able to use

.y:has( > .z) + .x

However, at present, no browsers support this selector.

---

Note: The ::after 'element' is, in fact, a pseudo-element, not a selector, used primarily, for styling purposes for inserting "content" inside the element to which the ::after pseudo-element is attached.

---

Related Topics