This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 9 years ago.
If I have markup like this:
<div>
<div class="one"></div>
</div>
<div class="two">
Is there any way in css that I can select class .two from class .one?
As in this fiddle.
What you are trying is not possible using only CSS, what you can do is you can re arrange the element like this
<div>
<div class="one"></div>
<div class="two">
</div>
And use
.one:hover + .two {
/* Styles */
}
Else you can do is this (If you don't want to change the markup) Demo
div {
width: 50px;
height: 50px;
background: pink;
}
.two {
height: 20px;
background: #000;
width: 20px;
}
div:nth-of-type(1):hover + .two {
background: #f00;
}
.one + .two {
background: #f00;
}
you can do using jquery
script type="text/javascript">
$(function () {
$(".one").mouseover(function () {
$(".two").css("background","red")
});
$(".one").mouseout(function () {
$(".two").css("background", "");
});
});
</script>
Related
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 3 years ago.
Improve this question
I have been trying to do this for a while and feel it should be fairly simple:
<div id = "container">
<div id = "item1" class = "item"> </div>
<div id = "item2" class = "item"> </div>
<div id = "item3" class = "item"> </div>
</div>
How can I select each item one after another and assign each a different background (without using ids)?
What I am trying to achieve:
#item1 {
background: red;
}
#item2 {
background: blue;
}
#item3 {
background: yellow;
}
<div id="container">
<div id="item1" class="item"> </div>
<div id="item2" class="item"> </div>
<div id="item3" class="item"> </div>
</div>
But isn't there a way to select each element in the #container div one by one, regardless of it's id value? By doing something such as the following :
.container:nth-child(1){ /*select first child of .conainter (#item1) ?*/
background: red;
}
or
.item:nth-of-type(2){ /*select second element of type .item (#item2) */
background: blue;
}
If you are trying to do this with only CSS:
.item:nth-of-type(1) { background: #fff}
.item:nth-of-type(2) { background: #000}
.item:nth-of-type(3) { background: #abc}
If you want to grab these after the fact using JS and/or jQuery:
jQuery(".item").each(function(i, el) {
if(i == 0) {
el.style.backgroundColor = "black";
} else {
el.style.backgroundColor = "red";
}
})
i here would be the index of your .item elements so you can target which one you need by this index (hence the conditional)
Also note that you need to set a height on the .item elements or add some content if you want to see the background color change. The height by default is 0
There are several ways to achieve this in CSS and JS. Below, is my variation I would normally use on client websites to achieve this background variation you are attempting to achieve:
#container div {width: 200px; height: 200px;}
#container div:first-child {background-color: red;}
#container div:nth-child(2) {background-color: green;}
#container div:last-child {background-color: blue;}
Im using first child and last childs on the first and last elements inside #container and then for the one in the middle i just tell the browser to find the second div inside #container.
Here is my HTML so my explination and CSS makes sense:
<div id = "container">
<div>ITS RED! </div>
<div>ITS GREEN! </div>
<div>ITS BLUE! </div>
</div>
Feel free to edit and play around with my code in a jsfiddle enviroment: https://jsfiddle.net/x9eouw7z/
For a static page you can use the :nth-child() selector like this:
https://jsfiddle.net/DIRTY_SMITH/6brcg9p7/3/
.item:nth-child(1) {
background: blue;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: green;
}
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
I'm trying to style a certain <div> in my markup with CSS/SASS, and I'm clueless as to why it's not applying the rules. This is my markup:
<div class="row addon-header">
<div class="col-sm-3">
// something here
</div>
<div class="col-sm-9">
<h2>Title</h2>
<h6><em>Slogan</em></h6>
<div class="col-xs-1">
// I want to access this
</div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
And this is the SASS I'm trying to use for it:
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1:first-child {
background-color: black;
padding-left: 0px !important;
}
}
If I remove the :first-child selector in my SASS, it's working, but obvious for every <div class="col-xs-1"> not just the first one, which is not what I want.
I also tried playing around and doing something like
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1 {
&:first-child {
background-color: black;
padding-left: 0px !important;
}
}
}
or
div.addon-header {
color: white;
> div.col-sm-9 {
> div.col-xs-1:first-child {
background-color: black;
padding-left: 0px !important;
}
}
}
or using :nth-child(1) instead. Nothing works. I'm clueless. Somewhere else in my SASS, I have the following:
.tab-content {
>.tab-pane:first-child > form > div.row > div {
// rules here
> div.picture-container {
// rules here
}
}
>.tab-pane {
// rules here
}
>.tab-pane:nth-child(4) > form {
// rules here
}
}
Which is working just fine. So I really don't get what I'm doing wrong in the first example. Anyone able to help?
You need the :nth-of-type() (or, in your case, the :first-of-type selector).
In the example your provided the :first-child of .col-sm-9 element is the h2.
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1:first-of-type {
background-color: black;
padding-left: 0px !important;
}
}
Note, though, that the :nth-of-type() selectors, like the :nth-child() selectors, apply to tags only, not class names; if you were to insert another div before the first .col-xs-1 then this would no longer work.
col-xs-1 need to wrap row because this block is not first element. First element is h2
I understand that I can change another element's style when hovering on a different element like this:
.element-one:hover .element-two {
opacity: 0.8;
}
But how can I change the style of all the elements in the page except element-two when I hover on element-one?
You can use .element-one:hover :not(.element-two).
Here is an example:
.element-one:hover :not(.element-two) {
opacity: 0.8;
}
.element-one {
background: black;
margin: 10px;
}
.element-one div {
background: green;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
<div class="element-one">
<div class="element-two">
element-two
</div>
<div class="element-three">
element-three
</div>
<div class="element-four">
element-four
</div>
</div>
However - note that it will work only for elements inside element-one and not for all the elements in the page.
You can do this with body for example, but the problem there is that .element-two is probably also inside some other element that exists inside body, and in such case the .element-two will get the opacity from it's containing element.
Short question: Why does the background-color of .b does not change when I hover? .a?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.a:hover .b {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
http://jsfiddle.net/2NEgt/
You need to have .a:hover + .b instead of .a:hover .b
.a:hover .b would work for a structure like
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.
Demo http://jsfiddle.net/thebabydino/EajKf/
Can you not do something like a:hover + b? see http://meyerweb.com/eric/articles/webrev/200007a.html
You can use + selector
.a:hover + .b {
background-color: blue;
}
to apply the css for sibling element, or
.a:hover > .b {
background-color: blue;
}
for nested class.
because .b isn't a child of .a, so that selector isn't finding anything. Use javascript to do what you want to do there.
There are two things you can do.
Either change your HTML to make .b a child of .a
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
OR
Change your css to use the adjacent selector
.a:hover + .b {
background-color: blue;
}
no js needed http://jsfiddle.net/2NEgt/3/
You shouldn't change a sibling's style when an event occurs on a different element. It's out of the context of CSS.
Use JavaScript to achieve this, for example:
var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
bDiv.style.backgroundColor = "white";
};
try to understanding this example:
html code
<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>
<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
when you hover on the box 1 than the box 3 will get black color
Jquery is a good and easy solution:
html:
<div class="a">AAA</div>
<div class="b">BBB</div>
script:
Put this script into your html if you want. That's all.
<script>
$(".a").mouseover(function(){
$(".b").css("color", "blue");
});
$(".a").mouseleave(function(){
$(".b").css("color", "red");
});
</script>