Is There a "Previous Sibling" Selector

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.

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 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>

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 - 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 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

Can I select a previous sibling in CSS?

CSS doesn't offer this solution.

What you can do is a javascript solution when user hover elem:

$('#btnsrchicon').prev('#txtSearch').addClass('yourClass')

Something like that:

$('#btnsrchicon').hover(function(){  $(this).prev('#txtSearch').addClass('show');}, function(){  $(this).prev('#txtSearch').removeClass('show');});
#txtSearch{  display:none;}
#txtSearch.show { display: block; border:2px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="topSearch"> <input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/> <button id="btnsrchicon" class="submit" onClick="search_another();">Button</button></div>

Select previous and next sibling of an active element

You Can't select previous sibling.
But yes you can select next sibling by

ul li.active+ li{
background:blue;
}

Js fiddle Link

You can select previous sibling by Javascript.

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



Related Topics



Leave a reply



Submit