Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS for same level

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
}
like image 214
user1365010 Avatar asked May 04 '12 03:05

user1365010


People also ask

What is a sibling selector?

The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

Can you use the same CSS class on multiple elements?

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing.

Can you have two classes in CSS?

To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.

How many levels are there in CSS?

There are three major levels of Style Sheets in CSS and one is applied first, and then another, and then another.


2 Answers

Use the general sibling combinator

#yourId:hover ~ div
{
    color:red;
}

Also note that Id's must begin with a letter. W3 ID Attribute

Example

like image 123
SupremeDud Avatar answered Nov 04 '22 08:11

SupremeDud


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/

like image 32
Petah Avatar answered Nov 04 '22 08:11

Petah