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; }
Related
css doesn't select the first class
:not(:first) doesn't work because .callout is wrapped by other container
.callout:not(:first) {
color: red;
}
<div class="d-flex">
<div class="flex-fill">
<div class="callout">
Text A
</div>
</div>
<div class="flex-fill">
<div class="callout">
Text B - only this set color red
</div>
</div>
</div>
Select the .callout element whose parent is not the :first-child of its parent element
.flex-fill:not(:first-child) .callout {
color: red
}
Or just revert the logic and target the :last-child
.flex-fill:last-child .callout {
color: red
}
Or target the .callout inside the second parent element, no matter how many .flex-fill siblings you have
.flex-fill:nth-child(2) .callout {
color: red
}
Codepen example
Anyway, I don't recommend to use this kind of selectors or to rely on a specific markup structure because this approach can easily cause maintainability problems as the code grows and, if possible, I'd suggest to place instead a specific class for this purpose on the right element.
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 :)
<div id="main-content">
<div>
<div>target me
<div>don't target me</div>
</div>
</div>
<div>
<div>target me too
<div>don't target me</div>
</div>
</div>
</div>
I've tried this:
#main-content div>div {
}
But this ALSO targets the divs saying "don't target me" I wish not to target those divs.
Of course we can use Id's or classes, but the point is to declare a general rule for all.
Please advice.
Just refine the selector a bit to enforce the hierarchy: #main-content > div > div
http://jsfiddle.net/zXaLU/
As a note, when using structural selectors it's nice to reference non-generic tags.
Example: #main-content > NAV > UL is more meaningful than #main-content > DIV > DIV
If you want styles only to apply to the outer of the two divs, you need to use two style definitions. The first sets the style for the div targeted and the second for the inner div not to be targeted:
#main-content div>div {
/* set some styles */
}
#main-content div>div>div {
/* reset the styles defined before */
}
In general the inner div (not targeted) inherits all the styles of its parent div, so in order to nullify that effect, you have to explicitly reset all those styles again.
EDIT
After all comments: If "targeting" does not include usual CSS inheritance, Tim Medora's answer is more suitable. My answer tried to account for inheritance as well.
How [dooes one] properly select [the specified] elements?
The "proper" way would be to give the items you want to select a class that is indicative of their status:
<div id="main-content">
<div>
<div class="someclass">target me
<div>don't target me</div>
</div>
</div>
<div>
<div class="someclass">target me too
<div>don't target me</div>
</div>
</div>
</div>
...and then you can simply use the class selector:
.someclass {
...styles...
}
But if you're unable to modify the markup, you can still use the child selector chain:
#main-content > div > div {
...styles...
}
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/
Would you please explain me the difference between these two CSS classes syntax:
.element .symbol {}
and
.element.large .symbol {}
I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?
.element .symbol
means .symbol inside .element
.element.symbol
means .element that has the class symbol as well.
So,
.element.large .symbol
means .symbol inside .element that has the class large as well.
I think you got a slight misunderstanding what the first one means.
.element .symbol {}
Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.
<div class="element">
<div class="symbol" />
</div>
In this example your first CSS entry would affect the <div> tag in the middle.
Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.
<div class="element large">
<div class="symbol" />
</div>
So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.
If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:
.element, .symbol {}
Edit: By request the link to the documentation of the CSS selectors.
Using
.element.large
refers to an element with both classes:
<div class="element large"></div>
rather than a descendant of an element:
.element .large
meaning that in:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
is 'receiving' the styles.
Basically, being separated by a space implies two elements with a descendant relationship.
You would use .element .symbol this where you have an element inside of another element. For example:
<div class="element">
<i class="symbol"></i>
</div>
If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:
<div class="element large">
<i class="symbol"></i>
</div>
In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element">.
In general, each part of a selector applies to one HTML element.
table[border].clname means a table with a border attribute and a class of clname, while table [border] .clname means an element with class clname, in an element with a border attribute, in a table.
(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)
Without whitespace, you are simply more specific with the selector. Because classes can appear several times in the html dom. But two or more classes in one element is rarer and therefore more precise.
Selectors with a whitespace (.a1 .b2) say search for the class a1 and see if there is a child or child-child element with the class b2 in this element.
An even higher degree of accuracy can be achieved with the >selector (.a1 .b2 > span). This states that only span elements should be taken into account which are direct children of the class .b2 located within an element with the class a1.
.a1 .b1 {
color: green;
}
.a1.a2 .b1 {
color: red;
}
.a1.a2 .b2 {
font-style: italic;
font-weight: bold;
}
.a1.a2 .b2 > span {
color: orange;
}
<div class="a1">
<div class="b1">Hello France</div>
<div class="b1">Hello Spain</div>
<div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
<div class="b1">Bye France</div>
<div class="b1">Bye Spain</div>
<div class="b2">
Bye
<span>World</span>
</div>
</div>