This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 3 years ago.
I want to change property of sibling element when input is focused, but it doesn't work. What am I doing wrong?
.sibling {
width: 100px;
height: 100px;
background-color: blue;
}
input:focus ~ .sibling {
background-color: red;
}
<div class="sibling"></div>
<input type="text">
Thanks in advance!
Just change your html order
<input type="text">
<div class="sibling"></div>
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 6 months ago.
Found this guide (https://www.w3schools.com/howto/howto_css_display_element_hover.asp) and I'm trying to see how to use it so that hover over one div can affect another.
I created this codepen: https://codepen.io/thewizck/pen/PoRyWRy
<style>
.hide {
opacity: 0;
}
.myBPbtn {
color: #000000;
}
.myBPbtn:hover + .hide {
opacity: 1;
color: red;
}
.myBPpin:hover + .myBPbtn {
color: red !important;
}
</style>
<div class="myBPbtn">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
<div class="myBPpin">I want to change the color of the "Hover over me." text when someone hovers over me.</div>
My question, why isn't the first line changing to red when the last line is hovered on?
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I want to change the background color of the box once i check the checkbox, but it doesn't work with the code i wrote. am i missing something? thanks
.box{
width: 100px;
height: 100px;
background-color: green;
}
input[type="checkbox"]:checked .box{
background-color: red;
}
<input type="checkbox" name="" />
<div class="box"></div>
this rule doesn't work because .box is not in input
input[type="checkbox"]:checked .box
but you can use adjacent sibling combinator:
input[type="checkbox"]:checked + .box
or general sibling combinator:
input[type="checkbox"]:checked ~ .box
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
.bwrapa {
background: gold;
}
.bwrapa:first-of-type {
background: blue;
}
.bwrapa:last-of-type {
background: blue;
}
<div class='parent'>
<div class='abc'>lorem</div>
<div class='abc'>lorem</div>
<div class='bwrapa'>lorem</div>
<div class='abc'>lorem</div>
<div class='bwrapa'>lorem</div>
<div class='bwrapa'>lorem</div>
<div class='abc'>lorem</div>
</div>
Why do all bwrapa classes have background: gold?
First and Last of them should have background: blue - shouldn't it?
What seems to be the problem and how do I fix it ?
.bwrapa:first-of-type will select the first child <div> of each parent element (since .bwrapa is a div element), not the first element with class bwrapa. See the documentation for more info.
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
<div class="tabs">
<div class="title">A</div>
<div class="title">B</div>
<div class="content">Something</div>
</div>
How can I select B title without restructuring my html, and there might be C, D, E and more title be added in. I tried below css it doesn't work
Use nth-child and nth-of-type selectors. Choose any of the below according to your needs.
Solution: 1
.tabs :nth-child(2){
color:red;
}
Solution: 2
.tabs .title:nth-child(2){
color:red;
}
Solution: 3
.tabs .title:nth-of-type(2){
color:red;
}
.tabs .title:nth-child(2) {
color : green;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
How to apply if input:focus then parent (div) change color of border?
div {
width: 150px;
height: 26px;
border: 1px solid #ccc;
background: white;
}
input {
outline: none;
border: none;
}
<div>
<input type="text" />
</div>
and div must have border: 1px solid blue; if <input> focused.
jsFiddle
Unfortunately there is currently no 'parent' tag selector in CSS - see this answer here : Is there a CSS parent selector?
The only way to explicitly alter the CSS of the parent div when your input is in focus would be to use JavaScript.
If you're able to use JavaScript in your solution, I can provide an example.