This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 8 years ago.
We're trying to control vertical spacing on content and have everything working great except when content follows a div - consider the following:
<div>
<ul>
<li></li>
</ul>
</div>
We'd like to remove top margin from all ul's that immediately follow a div so have been trying:
div + ul {
margin-top: 0;
}
Is this the proper use for this selector?
We just can't seem to get it working - any pointers in the right direction would be much appreciated.
Cheers
Ben
It has the word "adjacent" in it, this means "next to": your ul is not "next to" your div (on the same hierarchical level) but inside it.
What you want is a direct (not recursive) child selector, > so:
div > ul { ... }
And if it only happens to the first child of that div:
div > ul:first-child { ... }
Related
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
This is a basic question, but I cant find answer anywhere. So do you guys know what does > do within CSS?
.row > div > div {
height: 100%;
width: 100%;
}
It is immediate child selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
It's mean (children of). So in your code, that line means: Get the div element that has a parent div, and the parent div has a parent element that has a class named "row".
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
I am looking at some css code and i do not understand this line. The code has a div called shape which contains six other divs each containing an image.
which images does the following code select? As i said the div shape contains six others divs, so why does the code below select only one image?
#shape > div{
}
Actually A > B is a specialization of the more generic A B:
A B will apply to any element B being somewhere inside an element A.
A > B will only apply to elements B who are direct children of an element A.
Simple example:
CSS
.a .b {
color: red;
}
.a > .b {
color: blue;
}
HTML
<div class="a">
<div class="b">Hello</div>
<div class="c">
<div class="b">World!</div>
</div>
</div>
You can try this example right here at jsFiddle.
As you can see, the blue color isn't applied to the second instance of an element with the class b, because it's no direct child; only a descendant. Otherwise both elements would be blue, due to the second definition (.a > .b) following later.
This selects any DIV that is a child of the element with the ID shape.
this applies the styles to divs which are direct children of element with id #shape
Demo: Fiddle
in the demo the style is not applied to section > div because the container div is not a direct child of #shape
> is the child combinator, also known as the direct descendant combinator.
That means the selector #shape > div only selects divs that sit directly inside a tag with ID #shape
Demo : http://jsfiddle.net/JDs9G/
This question already has answers here:
Select every Nth element in CSS
(4 answers)
Closed 7 years ago.
Let's say I have 860px width area, where I need put 4 divs (200px width) and 3 spaces beetween them (20px).
If there would be only 4 divs at all, I can use
.div {width:200px; margin-right:20px}
.div:last-child {margin-right:20px;}
But there can be any number of divs, but only for comes to one line, so I can't use last-child. But width of one line is always 860px.
How to remove margin-right from fourth div in line? Or how to make this spacing correctly?
If you are targeting every 4th div element, you need to use nth-of-type with an expression of (4n+4) so it will select every 4th element.
div:nth-of-type(4n+4) {
color: red;
}
Demo
Note: Am using a general element selector here, so you need to add a
. before the div as you are using a class named .div
So what you need is a grid system, use nth-child:
div{margin-left:20px;}
div:nth-child(3n+1) {
margin-left: 0;
}
This
.div:nth-child(4){margin-right:0px;}
should work.
But I think you could simply do:
.div{margin-left:20px;}
.div:first-child{margin-left:0px;}
Because the first element will never change.
#Mr. Alien has given a best answer. But in your case you can do like this also (as if of your full width)
<div id="main">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
</div>
when you give margin-right to #main > div the last one is also have margin,
so alternatively you could do
#main{margin-right: -10px; /*what margin you have given to #main > div */}
Someone has posted answer with this
.div + .div{margin-left:20px;}
but deleted it.
It works for me and looks nice. Is it correct way to do this?
I'm not sure if my question title accurately displays what I'm trying to ask, but this is pretty much my first exposure to CSS3 and have been exploring various projects people have done in order to gain some hands on experience.
In searching through these projects I cam across something I'm having some trouble understanding. What exactly is the difference between the following two lines:
#random_ID > ul > li > a { ... }
#random_ID ul li a { ... }
Are these just two ways of writing the same thing? Any help would be greatly appreciated!
The greater than symbol limits the lookup to just first-level descendants: children of the selector on the left. Without the symbol, it can be any descendent at any level.
So the first example, it's "random_ID with a child ul with a child li with a child a" and the second is "random_ID with any descendant ul with any descendent li with any descendent a"
> means "direct child". This will only style it if the element (one on the right of >) is a direct child of the parent (one on the left of >)
So say if I have the following layout:
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
div > li { background: red; } Would not work, because li is not a direct child of it, whereas div > ul > li> or div li would work.
It should be noted that not every browser supports the direct child tag, specifically older versions of internet explorer, so don't rely on it, or have some fallback if you do use it.
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 7 years ago.
I have a problem with this code
<ul style="position: absolute; z-index: 999999999;">
<li>Home</li>
<li>music</li>
<li>cinema</li>
<li>shows</li>
<li>timeout</li>
<li>win</li>
</ul>
<div id="logo"></div>
I need to change the background position of the div#logo when hover on any "a"
tried this CSS selector with no luck
ul li a#hits_link:hover + div#logo{background-position:-198px 0px;}
Please Advice
You simply cannot do that, because #logo is not an adjacent sibling to #hits_link.
I have created a fiddle here to demonstrate what do you mean by adjacent sibling.
#logo is not related to #hits_link in any way, so AFAIK you will need the help of a js snippet to do something like that.
Using JQuery.. you can do something similar to this
$("#hits_link").hover(function() {
$("#logo").css("background-position", "-198px 0px");
},function() {
$("#logo").css("background-position", "0px 0px");
});
Here is a demo to that as well.
Update:
On that case, the second function is reverting the background position to 0 0.
use only this, if you want it to stay like that
$("#hits_link").hover(function() {
$("#logo").css("background-position", "-198px 0px");
});
Check demo
You can't. There's no selector that produces the behavior you want in CSS. Every CSS selector can only be used to affect an element and its descendants, not its siblings or any other totally unrelated element.
You'll have to use jQuery/JavaScript for this.
Example:
$("ul li a").hover(function() {
// When hovering, change the background-position of the #logo-element
$("#logo").css("background-position", "-198px 0px");
},function() {
// When mouse moves away, revert the background-position
$("#logo").css("background-position", "0px 0px");
});
I made you a fiddle. Treat it with care: http://jsfiddle.net/kMfWk/