I have this Fiddle, and what I am trying to do is when you mouse over each div section, it only changes the background for that section. Is there any way I can do that without having it change the background for everything? When I mouse over .two, the .one:hover gets fired. how can I make it fire .two and not .one when I mouse over .two?
CSS:
div.one:hover, div.two:hover, div.three:hover{
background-color: #69aeea;
}
HTML:
<div class="one">
Text 1
<div class="two">
Text 2
<div class="three">Text 3</div>
<div class="three">Text 3</div>
<div class="three">Text 3</div>
</div>
<div class="two">
Text 2
<div class="three">Text 3</div>
<div class="three">Text 3</div>
<div class="three">Text 3</div>
</div>
</div>
:hover is triggered all the way up to the root parent (typically <body>), so you can't trigger it only on the child when you have :hover states on the parent.
What you need to do is isolate the parts you actually want to show a hover state, which in this case I accomplished by wrapping the text in a <span>. This will keep the :hover state isolated from the other children of that parent.
<div class="one">
<span>Text 1</span>
<div class="two">
<span>Text 2</span>
<div class="three"><span>Text 3</span></div>
...
Then target specifically in the CSS: (The > character selects a direct descendent of a parent)
div > span:hover {
background-color: #69aeea;
}
You can then do different colors based on the level like so:
div.one > span:hover {
background-color: #69aeea;
}
div.two > span:hover {
background-color: #ae69ea;
}
div.three > span:hover {
background-color: #aeea69;
}
DEMO: http://jsfiddle.net/shshaw/8uetm/
Unfortunately, you can't access the parent of an element in CSS. Meaning, that if you hover over a child element, you can't set the background of its parent. You'll have to use javascript to achieve what you're asking.
Related
I'd like to have three words with a full stop after each word. How can I structure the html so that the text and full stop are included within each separate div but where the full stop can be targeted by a different selector. The reason is I'd like to have the color of the full stop different to the colour of the text, and can only do this if I define different target selectors. So far I have:
<div class="sometext">some
text</div>
<div class="sometext1">some
text</div>
<div class="sometext2">some
text</div>
<div class="full stop">.
</div>
<div class="full stop1">.
</div>
<div class="full stop2">.
</div>
Is possible to even write it all in a simpler, better way?
So some text in black, full stop red, some text black, full stop yellow, some text black, full stop green, without having to write it all as separate divs.
If you want different colours you'll have to have the full stops in span tags and have classes or id's for each span tag.
<style>
.sometext {
color: black;
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
</style>
<div class="sometext">some text<span class="red">.</span></div>
<div class="sometext">some text<span class="yellow">.</span></div>
<div class="sometext">some text<span class="green">.</span></div>
You can use ::after selector to add full-stop sign after all divs. For example:
[class^="some"]:after{content:'.'}
.black:after{color:black}
.yellow:after{color:yellow}
.green:after{color:green}
<div class="sometext black">some text</div>
<div class="sometext yellow">some text</div>
<div class="sometext green">some text</div>
Place everything inside one div and then wrap each sometext and fullstop in their own span. To be clear you should have a total of 6 spans. If all the sometext are to be styled the same and all the fullstops are to be styled the same use a class for the text spans and a different class for the full stop spans
<style>
.sometext span {
// whatever css you want applied to the full stop
}
</style>
<div class="sometext">some text<span>.</span></div>
<div class="sometext">some text<span>.</span></div>
<div class="sometext">some text<span>.</span></div>
I need to change the color of the text which is not the immediate element of the target element.
It is the child of another parent div. How do I target an outer element through css?
In the demo you can see another text' color changes on mouse over ofdiv1 span, likewise I want to change the color of div2 span
In my code, how can I target the div2's span (not the the div2 coz there will be many other elements inside div 2)?
PS - Need to target a child element of another parent from another parent element's child element.
HTML
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
Demo
If you only want to use CSS, you have to assign the :hover to .div1 in order to select .div2 in your hover (as you can not select a parent in CSS):
.div1:hover .another_txt {
color: red;
}
.div1:hover + .div2 span{
color: red;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
You can use JavaScript / JQuery for this. To my knowledge you cannot achieve it in CSS.
HTML:
<div class="div1">
<span id="hover">hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span id="target">How to change this text color on div1 span hover?</span>
</div>
JS:
$(document).ready(function() {
$("#hover").hover(function() {
$("#target").css("color", "red");
})
})
Here is the live demo: https://jsfiddle.net/vf8ab8yh/1/
To target the span in the div2 when div1is hovered use the following CSS selector:
.div1:hover+.div2 span{
color: pink;
}
Demo:
.div1:hover+.div2 span{
color: pink;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
<div>Don't change this</div>
</div>
The best you can do is to wrap the span in another wrapper (you can also not wrap it,your choice) then use the ~ selector.
The use of ~ is to select all the second element (.div2) preceded by the first element (.newDiv). You can read more from here.
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
.newDiv:hover~.div2>span {
color: pink;
}
<div class="newDiv"><span>hover me</span></div>
<div class="div1">
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
css selectors
.div1:hover~.div2 {
color: red
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle
My code is as follows:
HTML
<div class="divs">
<div class="row">row 0</div>
<div class="not-row"></div>
<div class="row">row 1</div>
<div class="not-row"></div>
<div class="row">row 2</div>
<div class="not-row"></div>
<div class="row">row 3</div>
<div class="not-row"></div>
</div>
CSS
.row:nth-child(even) {
background: #fff;
}
.row:nth-child(odd) {
background: #eee;
}
This is supposed to paint the background of two of the rows gray and two of the rows white. Unfortunately it paints all of their backgrounds gray. What am I doing wrong?
I tried using nth-of-type instead of nth-child but that didn't change anything.
jsFiddle example
For even just use (as a default)
.row {}
Then override the odd ones with:
.row:nth-child(4n+1) {}
.row {
background: #fff;
}
.row:nth-child(4n+1) {
background: #eee;
}
http://jsfiddle.net/b8ma1hon/3/
More on how nth-child works can be found here:
https://css-tricks.com/how-nth-child-works/
You cannot simply use even/odd in this instance as that is in relation to all child elements, not just the ones with the class row.
Your inclusion of .row in the selector is purely an extra criteria and has no impact on the nth-child selector.
Likewise I could state:
.row:nth-child(1):hover {}
This would restrict selection to an element with a class of row, which is the 2nd child, which is currently in a hovered state.
It wouldn't make sense if this was the 2nd element out of all the hovered elements as you can only hover over one at a time.
I hope that makes sense!
It's also worth noting that your selector is now dependant on the not-row existing, or at least some kind of element existing between the row elements.
If this was to change then your selector would also have to change.
Alternatively you could change your element type for the not-row elements to something else so that you can make use of the nth-of-type selector:
<div class="divs">
<div class="row">row 0</div>
<span class="not-row"></span>
<div class="row">row 1</div>
<span class="not-row"></span>
<div class="row">row 2</div>
<span class="not-row"></span>
<div class="row">row 3</div>
<span class="not-row"></span>
</div>
.row {
background: #fff;
}
.row:nth-of-type(odd) {
background: #eee;
}
http://jsfiddle.net/b8ma1hon/5/
I want to know if there's ability to change CSS of element that is not direct child or sibling of element hovered.
<style>
.one:hover .two {
color:red;
}
</style>
<div>
<div class="one">
111
</div>
</div>
<div class="two">
222
</div>
http://jsfiddle.net/hgd0drky/
Unless you add a parent element to both and make them have Child / Sibling relationship it is not possible purely based on CSS.
You will need javascript, however to demonstrate how easy this can be, I shall make up CSS
http://jsfiddle.net/hgd0drky/1/
<div class="one">
<div >
111
</div>
<div class="two">
222
</div>
</div>
CSS
.one:hover div {color:red;}
.one:hover .two {color:red;}
Which is just an extension of your code.