Consider the following HTML:
<div class="a">
<div class="b">Hello</div>
</div>
<div class="c">
<div class="b">World</div>
</div>
Adding the following CSS colors only "World" in red, as expected:
.c .b {
color: red;
}
But, adding the following CSS instead colors both "Hello" and "World" in red:
:not(.a) .b {
color: red;
}
Why?
You need to give it like this:-
Demo
div:not(.a) .b {
color: red;
}
Pseudo-class :not
Syntax is selector:not(){ properties }
Since the :not pseudo-class represents an element that is not represented by its argument,
you have to specify the element you want to exclude before the :not selector
Per your example, try this instead:
div:not(.a) .b {
color: red;
}
Related
I have a simple markup and I would like to select a div by it's content. Here is my code...
<div class="parent">
<h4>Child of parent</h4>
<div>
<div>I'm red!</div>
<h4>I'm red's sister</h4>
<div>I'm blue!</div>
<h4>I'm blue's brother</h4>
</div>
</div>
and selecting <div>I'm red!</div> with the following CSS...
div:contains("I'm red!") {
color: red;
}
since contains() is deprecated or never got implemented, I can do the following...
.parent div:nth-child(1) {
color: red;
}
.parent dh4:nth-child(2) {
color: red;
}
to target just the first two elements, and it worked, but I would like to know if it is a way I can target just the first two element which happened to be <div> and <h4> in one CSS line of code? I need to do this without javascript. Eventually I need to target just 3rd and 4th.
Yes. Use :nth-child(-n+2).
For the 3rd and 4th you can use :nth-child(n+3):nth-child(-n+4) or just :nth-child(-n+4) and let specificity fix it for you.
The logic is easy:
:nth-child(-n+a) selects the a-th element and its previous siblings
:nth-child(n+a) selects the a-th element and its following siblings
:nth-child(n+a):nth-child(-n+b) selects the a-th and b-th elements, and the siblings in-between.
.parent > div > :nth-child(-n+4) {
color: blue;
}
.parent > div > :nth-child(-n+2) {
color: red;
}
<div class="parent">
<h4>Child of parent</h4>
<div>
<div>I'm red!</div>
<h4>I'm red's sister</h4>
<div>I'm blue!</div>
<h4>I'm blue's brother</h4>
</div>
</div>
I don't think I understand your question. You can do that to have it on one line anyway.
.parent div:nth-child(1), .parent dh4:nth-child(2) {color: red;}
or you could apply a red class on the first two divs and do :
.red{color:red}
In the following code I want to add styling specifically to the content of the last "B".
<div class="A">
<div>
I am <span class="B">foo</span>.
</div>
<div>
I like <span class="B">bars</span>.
</div>
<div>
Actually, call me <span class="B">FOOBAR</span>.
</div>
</div>
I have been trying
.B:last-of-type { color: red; }
and all classes "B" get selected because it uses the last occurence in it's immediate parents child elements. i.e. in it's direct siblings
Is there any way to only select the last occurence of "B" in the whole document?
You can do it like this
.A div:last-of-type .B { color: red; }
Fiddle Demo
or
.A div:last-child .B { color: red; }
Fiddle Demo
Try this JsFiddle Demo
.A div:last-child .B{ color: red; }
Found the answer! CSS3 get last element
I was doing a version of this but I found it ugly, I guess this is the only way. I will keep this Question open for a bit to see if anyone has any better suggestions.
.A span.B:last-child
{
background:#999;
}
.A div:last-child .B:last-child
{
background:orange;
}
I would like to know if we can catch these 2 differents cases avoiding javascript parsing:
<div class="a b"></div>
<div class="a"></div>
div.a.b {
color: red;
}
div.a { //Specify "when there is no class b"
color: blue;
}
With CSS3 you can use :not:
div.a:not(.b) { ... }
With CSS2 it's not directly possible, but but you can set the attributes you want and "unset" them with the div.a.b rule. You are already doing this: your divs are red, but "when there is no class b" they are blue.
Using CSS3 selector:
div.a:not(.b){
color: blue;
}
http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/
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>
I have the following CSS:
.foo .bar {
background: red;
}
Which works fine for the following HTML:
<div class="foo">
<div class="bar">I have a red background</div>
</div>
But I can't seem to find a way to reuse the CSS definition when I'm not in a parent/child relationship. For example, how could I apply the same CSS to the following DIV:
<div class="???">I want a red background!</div>
You can add additional selector with comma (,) as specified in W3C selectors grouping
.foo .bar, .foobar {
background: red;
}
this would work in both
<div class="foo">
<div class="bar">I have a red background</div>
</div>
and
<div class="foobar">I want a red background!</div>
You can use a comma to indicate multiple selectors that a CSS rule should apply to
.foo .bar, .??? {
background: red;
}
Use a comma separated list of selectors in the definition:
.foo .bar, .otherSelector, #someID{
background: red;
}
.foo .bar, .redback {
background: red;
}
will do a magic with
<div class="redback">I want a red background!</div>
or get rid of hierarchy and use only
.bar {
background: red;
}
which will work both cases
Try
.foo .bar, .foobar {
background: red;
}
with
<div class="foo">
<div class="bar">I have a red background</div>
</div>
<div class="foobar">I want a red background!</div>
The ".foo .bar" CSS definition is written expressly for a parent-child (more accurately ancestor-decendent) relationship.
You could write the CSS like this:
.alternate-background {
background: red;
}
and the HTML like this:
<div>
<div class="alternate-background">I have a red background</div>
</div>
which would allow you also to use this:
<div class="alternate-background">I want a red background!</div>