i have a problem of making two objects that when i hover on one of them, it will change one object. for example, i have object bar1, bar2, and bar3. i want to make when i hover on bar1 or bar3 will change the bar2.this is the css code:
.bar2{
left:0.5%;
right:0.5%;
}
.bar1:hover + .bar2{left:5%;}
.bar3:hover + .bar2{right:5%;}
and this is my html code:
<div style="position:absolute;">
<div class="bar1">
</div>
<div class="bar2">
</div>
<div class="bar3">
</div>
</div>
from that code i just can affect bar2 by hovering on bar1, but not with bar3.
Every body please help me. and thanks for helping.
What you need to do is something like this: live demo here (click).
<div class="bar1">Bar 1
</div>
<div class="bar3">Bar 3
</div>
<div class="bar2">Bar 2
</div>
css:
#one {
background: red;
}
#two {
background: white;
}
#three {
background: blue;
}
#one:hover ~ #two, #three:hover ~ #two {
background: black;
}
.bar3:hover + .bar2 or .bar3:hover ~ .bar2 is only going to select .bar2 if .bar2 is AFTER .bar3.
It might make more semantic sense for the elements to be in a different order, but in a lot of cases (such as yours here), the result is visually the same even with the order changed. If you can't change the order in order to select things this way, then you would have to resort to javascript to select adjacent elements that are previous.
There is talk of having a parent selector in css4. That would be nice :)
Related
Essentially what I am trying to do is have one element react as the hover state of a different element.
.page-template-page-services-new .imgBlock:hover { .page-template-page-services-new .ButtonService {color: #6395ce; background-color: #fff; } }
Not currently working - is this a thing? If not, how might I accomplish it. I know the selectors are correct, they work independently.
What I think you are referring to is that you've seen something akin to
.selector-one{
//style definitions
.selector-two{
//other style definitions
}
}
This comes from pre-processors such as SCSS (Sass) or LESS, I'll assume you can do a quick google on those.
For the other part of your question, yes, you can style an element differently if it's parent container or even a sibling is hovered.
Example
.container-hover:hover .red-on-hover{
background-color:red;
}
.sibling-hover:hover + .sibling-hover{
background-color:blue;
}
<div class="container-hover">
<h3>Other Text</h3>
<div class="red-on-hover">Background will turn red on hover</div>
</div>
<p class="sibling-hover"> When I am hovered, my sibling will be blue</p>
<p class="sibling-hover"> Blue? Blue</p>
For the sibling hover, please note that if you added more .sibling-hover elements that all but the first one would be able to turn blue if you hovered over it's immediately prior sibling.
It can work if they have a parent child relationship.
.page-template-page-services-new {
background: #ccc;
}
.page-template-page-services-new .imgBlock:hover .ButtonService {
color: #6395ce;
background-color: #fff;
}
<div class="page-template-page-services-new">
<div class="imgBlock">
<img src="http://placehold.it/100/100" alt="">
<div class="ButtonService">
<p>
This is a test
</p>
</div>
</div>
</div>
I am working on a tree view of undeterminable nestability, but would like to define some nested rules for styling. For example, I want the first level item to have a particular border. Nested items immediately underneath to have a different border. I have a working example, but it is static and verbose. I know there has to be a better way using selectors, but I can't seem to make it work. Here is my current solution-
.item {
border-left-color: #somecolor1;
}
.item > .item {
border-left-color: #somecolor2;
}
.item > .item > .item {
border-left-color: #somecolor3;
}
.item > .item > .item > .item {
border-left-color: #somecolor4;
}
.item > .item > .item > .item > .item {
border-left-color: #somecolor5;
}
So this works, but obviously it is kind of verbose. Is there a better way?
In CSS the selector string is largely describing the nesting structure, and there does not currently exist any generational skipping selectors such that you might theoretically do something like .item:nth-grandchild(4) to replace your fifth example.
If reducing verbosity of your css is of high importance to you (lets say you have up 10 or even 100 levels of nesting you are switching on), then really you need to look into modifying the html itself in order to reduce the css needed. That can be done dynamically via server-side scripting (PHP, etc.), or client-side scripting (Javascript), or statically by you. Which way you choose will depend on a variety of factors.
The html modification can be in the form of more specific classes or direct style properties, but I recommend the former. Here are at least four ways css would be reduced:
#1 Multiple Classes, One Indicating Level
Sample HTML
<div class="item L-1">
<div class="item L-2">
<div class="item L-3">
</div>
</div>
</div>
Sample CSS
.item.L-1 {
border-left-color: #somecolor1;
}
.item.L-2 {
border-left-color: #somecolor2;
}
.item.L-3 {
border-left-color: #somecolor3;
}
#2 Multiple Classes, One Indicating Color
Sample HTML
<div class="item LBC-1">
<div class="item LBC-2">
<div class="item LBC-3">
</div>
</div>
</div>
Sample CSS
.item.LBC-1 {
border-left-color: #somecolor1;
}
.item.LBC-2 {
border-left-color: #somecolor2;
}
.item.LBC-3 {
border-left-color: #somecolor3;
}
#3 Single Class Name Indicating Level
Sample HTML
<div class="item-L1">
<div class="item-L2">
<div class="item-L3">
</div>
</div>
</div>
Sample CSS
[class *= "item-"] {
/* common css properties for the items goes here */
}
.item-L1 {
border-left-color: #somecolor1;
}
.item-L2 {
border-left-color: #somecolor2;
}
.item-L3 {
border-left-color: #somecolor3;
}
#4 Style Properties for Each Item
Sample HTML
<div class="item" style="border-left-color: #somecolor1">
<div class="item" style="border-left-color: #somecolor2">
<div class="item" style="border-left-color: #somecolor3">
</div>
</div>
</div>
Sample CSS
/* none to control color */
Discussion of "Best"
Often dynamic solutions end up producing html like that of #4, which ends up making the html very verbose, and I personally would not recommend it. However, those dynamic solutions do not need to do that, but could instead add class names like #1-3.
What is ultimately "best" depends a lot on what you are trying to achieve, how much control you have, and what other properties need changing as well. Personally, I would avoid #2 as well, because it begins to tie presentation too much to html by having a class name associated with the "left border color." To me, solution #1 or #3 would be best, as those are simply setting classes that help the css to know what "level" the .item is at, which then allows for specific targeting to that level for anything you may need it for.
Of course, if you were really dealing with 100 nested levels, then even for solutions #1-3, you might want to look into some css preprocessor to generate the 100 levels of code needed. But the css output would still be far less than the long selector strings needed using the current method you are doing.
I am working on a tree view of undeterminable nestability, but would like to define some nested rules for styling. For example, I want the first level item to have a particular border. Nested items immediately underneath to have a different border. I have a working example, but it is static and verbose. I know there has to be a better way using selectors, but I can't seem to make it work. Here is my current solution-
.item {
border-left-color: #somecolor1;
}
.item > .item {
border-left-color: #somecolor2;
}
.item > .item > .item {
border-left-color: #somecolor3;
}
.item > .item > .item > .item {
border-left-color: #somecolor4;
}
.item > .item > .item > .item > .item {
border-left-color: #somecolor5;
}
So this works, but obviously it is kind of verbose. Is there a better way?
In CSS the selector string is largely describing the nesting structure, and there does not currently exist any generational skipping selectors such that you might theoretically do something like .item:nth-grandchild(4) to replace your fifth example.
If reducing verbosity of your css is of high importance to you (lets say you have up 10 or even 100 levels of nesting you are switching on), then really you need to look into modifying the html itself in order to reduce the css needed. That can be done dynamically via server-side scripting (PHP, etc.), or client-side scripting (Javascript), or statically by you. Which way you choose will depend on a variety of factors.
The html modification can be in the form of more specific classes or direct style properties, but I recommend the former. Here are at least four ways css would be reduced:
#1 Multiple Classes, One Indicating Level
Sample HTML
<div class="item L-1">
<div class="item L-2">
<div class="item L-3">
</div>
</div>
</div>
Sample CSS
.item.L-1 {
border-left-color: #somecolor1;
}
.item.L-2 {
border-left-color: #somecolor2;
}
.item.L-3 {
border-left-color: #somecolor3;
}
#2 Multiple Classes, One Indicating Color
Sample HTML
<div class="item LBC-1">
<div class="item LBC-2">
<div class="item LBC-3">
</div>
</div>
</div>
Sample CSS
.item.LBC-1 {
border-left-color: #somecolor1;
}
.item.LBC-2 {
border-left-color: #somecolor2;
}
.item.LBC-3 {
border-left-color: #somecolor3;
}
#3 Single Class Name Indicating Level
Sample HTML
<div class="item-L1">
<div class="item-L2">
<div class="item-L3">
</div>
</div>
</div>
Sample CSS
[class *= "item-"] {
/* common css properties for the items goes here */
}
.item-L1 {
border-left-color: #somecolor1;
}
.item-L2 {
border-left-color: #somecolor2;
}
.item-L3 {
border-left-color: #somecolor3;
}
#4 Style Properties for Each Item
Sample HTML
<div class="item" style="border-left-color: #somecolor1">
<div class="item" style="border-left-color: #somecolor2">
<div class="item" style="border-left-color: #somecolor3">
</div>
</div>
</div>
Sample CSS
/* none to control color */
Discussion of "Best"
Often dynamic solutions end up producing html like that of #4, which ends up making the html very verbose, and I personally would not recommend it. However, those dynamic solutions do not need to do that, but could instead add class names like #1-3.
What is ultimately "best" depends a lot on what you are trying to achieve, how much control you have, and what other properties need changing as well. Personally, I would avoid #2 as well, because it begins to tie presentation too much to html by having a class name associated with the "left border color." To me, solution #1 or #3 would be best, as those are simply setting classes that help the css to know what "level" the .item is at, which then allows for specific targeting to that level for anything you may need it for.
Of course, if you were really dealing with 100 nested levels, then even for solutions #1-3, you might want to look into some css preprocessor to generate the 100 levels of code needed. But the css output would still be far less than the long selector strings needed using the current method you are doing.
I'm trying to select the first element in the body with class .box but excluding those inside the class .topbar.
I was using this approach :not(.topbar)>.box and is selecting all the elements .box excluding the one inside .topbar but I just want the first one.
I know that I can select it in an easier way but I'm wondering how could I do it that way...
Note: the number of elements are not fixed, so .topbar could exist or not...
Example:
<body>
<div class="topbar">
<div class="box">
...
</div>
</div>
<div class="box"> <!-- Just want to select this one -->
...
</div>
<div class="box">
....
</div>
</body>
Thanks!
I think you can divide this up into two cases:
1) like in your example above, topbar is the first child and box is the second child
2) if topbar doesn't exist, then box is the first child
.topbar + .box, body > .box:first-child {background:red;}
Here is a more robust way of doing it.
Consider a more generalized version of the original HTML snippet:
<div class="topbar">
<div class="box">In the topbar...</div>
<div class="box">In the topbar...</div>
</div>
<div>temp</div>
<div class="box">Just want to select this one...</div>
<div class="box">a second one....</div>
<div>temp</div>
<div class="box">a third one....</div>
<div>temp</div>
<div class="box">a third one....</div>
and apply the following CSS:
body > div.box
{
background-color: beige;
}
body > div.box ~ div.box
{
background-color: pink;
}
See demo at: http://jsfiddle.net/audetwebdesign/Rufcc/
The first rule selects all the div.box elements that are a child of body and applies a background color.
The second rule then selects all the div.box elements after the first one and then overwrites the background-color to some default value (could be transparent).
The main advantage of this approach is it can pick out the first div.box element regardless of how many other elements are before it.
.topbar + .box { background:red; }
If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like :
<div id="1" ></div>
<div></div>
<div></div>
And CSS :
#1 :hover < body > div
{
//Here I change the things
}
Use the general sibling combinator
#yourId:hover ~ div
{
color:red;
}
Also note that Id's must begin with a letter. W3 ID Attribute
Example
Put a wrapper around them, then put the hover on the wrapper.
<div class="wrapper">
<div class="element">foo</div>
<div class="element">bar</div>
<div class="element">baz</div>
</div>
.wrapper:hover .element {
color: red;
}
Example: http://jsfiddle.net/EB92r/