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
Floating Elements Within a Div, Floats Outside of Div. Why
Why Can't an Element With a Z-Index Value Cover Its Child
Is There a CSS Selector For Text Nodes
Bootstrap Dropdown Sub Menu Missing
Difference Between "Word-Break: Break-All" Versus "Word-Wrap: Break-Word" in Css
Order Columns Through Bootstrap4
How to Make Button Look Like a Link
Css Attribute Selectors: the Rules on Quotes (", ' or None)
Hide Text Node in Element, But Not Children
Adjust List Style Image Position
Why Does Height 100% Work When Doctype Is Removed
Transitions on the CSS Display Property
What Do Commas and Spaces in Multiple Classes Mean in Css
Select Every Nth Element in Css
Why Do the :Before and :After Pseudo-Elements Require a 'Content' Property