This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 11 months ago.
The community reviewed whether to reopen this question 11 months ago and left it closed:
Original close reason(s) were not resolved
Referring to this Stackover question from 2009 (Is there a "previous sibling" selector?), it seems that it was not possible then.
Here are two small examples that illustrate the problem
both elements touched by the CSS are under the triggering element.
In example two one Element is above the triggering element and the other remains below it. As a result, the sibling selector does not affect the element on top.
Example one
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="" id="nocheck">ENABLE</div>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
Example 2
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<div class="" id="nocheck">ENABLE</div>
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
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
This question already has answers here:
What is syntax for selector in CSS for next element?
(5 answers)
Closed 2 years ago.
<div class="set">
<a href="javascript:void(0);" class="active">TEST <img class="" src="/active-arrow.svg">
</a>
<div class="content">content </div>
I want to set css for content class.
if { display: block}.
else { display: none;}
if tried
.set > a.active {
color: #123399;
font-family: 'lato-bold'; }
.content {
display: none; }
.set > a.active .content{
display: block;}
but not getting the proper results.
You are looking for adjacent sibling combinator +.
a.active + .content {
display: block;
}
The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
source: CSS selectors - CSS: Cascading Style Sheets | MDN
Example
const toggleActive = (btn) => {
console.log(btn.classList.contains("active"));
btn.classList.contains("active")
? btn.classList.remove("active")
: btn.classList.add("active")
}
.content {
display: none;
}
a.active + .content{
display: block;
}
<div class="set">
<a class="active" onClick="toggleActive(this)">TEST</a>
<div class="content">content</div>
</div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
On hover of child, change background color of parent container (CSS only)
(3 answers)
Closed 3 years ago.
.background{
width: 200px;
height: 100px;
background: ;
}
input:checked ~ div{
background: blue;
}
<input type="checkbox" id="hamburguesa">
<label for="hamburguesa">click here</label>
<div class="background">aasd</div>
how can i dothe first result on the second snippet?
there is some way to select a father element?
i want change events using only css without js
.background{
width: 200px;
height: 100px;
background: ;
}
input:checked ~ div{
background: blue;
}
<div class="hambur">
<input type="checkbox" id="hamburguesa">
<label for="hamburguesa">click here</label>
</div>
<div class="background">aasd</div>
CSS Selector Level 4 has a selector called ":has", but it isn't compatible with any browser yet, so you'll have to use javascript/jquery for now.
:has()
This is probably the best solution you can find right now:
Is there a CSS parent selector?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
i have one problem .I can not give each one a particular style.help meenter image description here
You need to use :nth-of-type(n) selector.
// For First Right Class Div
#container .right:nth-of-type(1) {
}
// For First Left Class Div
#container .left:nth-of-type(1) {
}
Hence for every div you need to change n value.
Your question is extremely unclear but I want to help you out anyhow. I assume you want to style each div inside the container individually, rather than styling all of ".left" and ".right".
To do this, you can add multiple classes to each div;
.right {
color: red;
}
.left {
color: blue;
}
.r1,
.l3{
color: green;
}
<div id='container'>
<div class='right r1'>r1</div>
<div class='right r2'>r2</div>
<div class='right r3'>r3</div>
<div class='right r4'>r4</div>
<div class='left l1'>l1</div>
<div class='left l2'>l2</div>
<div class='left l3'>l3</div>
<div class='left l4'>l4</div>
</div>
In the example above I have changed the class in, for example, the xth 'left' to 'left lx'. We can then individually style the divs.
You could also use the ":nth-child" selector, as seen below:
.right {
color: red;
}
.left {
color: blue;
}
#container div:nth-child(7),
#container div:nth-child(1) {
color: green;
}
<div id='container'>
<div class='right'>r1</div>
<div class='right'>r2</div>
<div class='right'>r3</div>
<div class='right'>r4</div>
<div class='left'>l1</div>
<div class='left'>l2</div>
<div class='left'>l3</div>
<div class='left'>l4</div>
</div>
Hope this helps!
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I want to edit css style for a Class3 which is inside a Class2 right after a Class1.
but I only want to edit style if Class1 has a specialClass inside, like this:
<div class="class1">
<div class="specialClass"></div>
</div>
<div class="class2">
<span class="class3"></span>
</div>
I tried this, but it doesn't work:
.class1 .specialClass ~ .class2 .class3 {}
Is this even possible? If yes can someone explain me the error I made?
$(function(){
if($('.class1').find('.specialClass').length > 0){
$('.class3').css("background-color", "yellow");
}
})
div{
width: 100px;
height: 100px;
border: 1px solid black;
}
span{
padding-left: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
<div class="specialClass"></div>
</div>
<div class="class2">
<span class="class3"></span>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is an angular app that displays a list of movies.
Link to plunker here: https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview
In short, there are 6 elements in the ng-repeat loop to display the movies, and they are placed one next to the other with no margin, but with varying widths and colors depending on the order in which they appear(based on my limited understanding).
Index.html:
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div ng-repeat="show in shows">
<div class="rank">{{$index + 1}}</div>
<div class="img_container">
<img class="img-responsive" ng-src="{{show.series_img}}">
</div>
<h2 class="series">{{show.series}}</h2>
<p class="genre">{{show.genre}}</p>
<p class="run-start">{{show.run_start}}</p>
<p class="description">{{show.description}}</p>
</div>
</div>
</div>
</div>
The interaction of these rules is what I find particularly confusing:
div.ng-scope:nth-child(odd) h2 {
width: 400px;
}
div.ng-scope:nth-child(even) p+p {
width: 400px;
}
p {
background: #f9f9f9;
display: block;
float: left;
font-size: 18px;
height: 200px;
margin: 0;
padding: 30px;
width: 200px;
}
div.ng-scope p+p {
background: #e5e5e5;
}
div.ng-scope p+p+p {
background: #000;
color: #fff;
font-size: 14px;
width: 800px;
}
I would also appreciate any links to tutorials explaining how ng-scope works in this context.
div.ng-scope selects the <div ng-repeat="show in shows"> element because the ng-repeat adds the ng-scope class to the element when it renders.
nth-child(odd) and nth-child(even) set the styles of the odd and even children of the elements' respective containers, respectively.
p affects all <p> elements, while p+p affects all <p> elements following immediately after another <p> element. p+p+p affects all <p> elements immediately following two <p> elements.
Check out this article for more information about the plus symbol in css: What does the "+" (plus sign) CSS selector mean?