i would like a background of my very first div but not all first divs of the divs. The very first div does not have class.
I tried the following css but it does not work, it gives background to all first sub-divs too what i do not want :
.wrapper div:first-child {background: #ff0000;}
or
.wrapper div:nth-child(1) {background: #ff0000;}
Fiddle here !
How to give background color only to my very first div without class name ?
You could use > child selector.
.wrapper > div:first-child {
background: #ff0000;
}
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first. By contrast, when two selectors are
combined with the descendant selector, the combined selector
expression matches those elements matched by the second selector for
which there exists an ancestor element matched by the first selector,
regardless of the number of "hops" up the DOM.
Fiddle: http://jsfiddle.net/ba5gfr27/8/
Reference: MDN - Child selectors
Related
<!DOCTYPE html>
<html>
<head>
<style>
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
Question:
If i change
p:last-child
{
background:#ff0000;
}
to
:last-child
{
background:#ff0000;
}
then the whole page became red. why? what is the difference between p:last-child and :last-child?
p:last-child will select a p element if it's a last-child, if you've any other element as your last-child it will fail
Demo
In this case, you should use a more stricter pseudo like
p:last-of-type {
background:#ff0000;
}
Demo 2
The above will select p element, which is last regardless of any other element which can be last-child of the parent element.
Coming to this selector, :last-child, is not specific at all, you haven't specified last-child of what? So it will select any parent elements last-child
So
:last-child {
background:#ff0000;
}
Will select i and body element but NOT p as it's not the last-child of body, same way if you use :last-of-type it will select
i body as well as p because now we are using last-of-type so it selects last element of each distinct element.
Demo
You can use firebug to inspect each element and see how the elements pick up these properties.
Since the :last-child selector selects all elements that are the last child of their parent.
By default all elements selected it, the first one is to specify the p element. [Google Translation]
p:last-child works by applying the CSS property to only the last child of a paragraph element.
:last-child works by applying the CSS property to the last child of the parent element. In this case, the last child would always be the body, since we always have one body, right? :)
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/
I'm currently reading Charles Wyke-Smith's book "Stylin' With CSS".
He has one section where there is nav.menu > ul {} AS WELL AS nav.menu ul {}.
What's the purpose of the > selector?
http://www.w3.org/TR/CSS2/selector.html
Quick Explanation:
E > F Matches any F element that is a child of an element E.
More detail from the same source:
A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children
of BODY:
body > P { line-height: 1.3 } The following example combines
descendant selectors and child selectors:
div ol>li p It matches a P element that is a descendant of an LI; the
LI element must be the child of an OL element; the OL element must be
a descendant of a DIV. Notice that the optional white space around the
">" combinator has been left out.
For information on selecting the first child of an element, please see
the section on the :first-child pseudo-class below.
It selects immediate children, as opposed to descendants at any point in the hierarchy.
I have the following set up
.test div:first-child {};
<div class="test" id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
Somehow div#three inherits the first-child styles, even though it is not the first-child of div.test. Is this intentional by the browsers? Can someone explain this?
While #two is the first child of #one but #three isn't, #three is still the first child of #two. So both inner divs get the styles.
The descendant combinator (the space character) in your selector tells the browser to select any div in any level of nesting from .test, as long as it's contained somewhere within an element with that class. The :first-child pseudo-class says to only select an element if it's the first child of its parent, whatever that parent may be, not just the element represented on the left side of the combinator.
If you only want to target the first child of .test, use the child combinator >:
.test > div:first-child {}
Because > expresses a parent-child relationship, it is safe to imply that the parent concerned by div:first-child is represented by .test.
This is the intended behaviour. You need to write your CSS rule like this:
.test > div:first-child
The > ensures only the first child of the .test element is selected. Without it, any div that is the first child of any node within .test is selected.
Looking through style sheets from popular & unpopular websites I have found the div selector included in them. The bottom four examples were taken from the style sheets of the popular sites Stack Overflow, Github, Youtube & Twitter:
div.form-item-info{padding:4px 0 4px 4px;width:80%;color:#777;}
.searchFooterBox div span.smallLabel{font-size:14px}
#readme.rst div.align-right{text-align:left;}
.hentry .actions>div.follow-actions{visibility:visible;text-align:left;}
I find that I can design fully functioning CSS style sheets with out using the div selector so the question is:
What is the div selector's function?
&
Why do so many developers use it?
EDIT:
To be clear, when using the div selector, what does it mean when div appears before an id or class?
For example:
div.foo { color:black; }
div#bar { color:gray; }
And what does it mean when div appears after an id or class?
For example:
.foo div { color:black; }
#bar div { color:gray; }
When the div selector appears after an id or class does it have to have another selector appear after it?
For example:
#foo div span { color:black; }
#foo div p { color:black; }
Being more explicit in your selector makes it easier to remember what the HTML structure is like. Months down the line I can read the CSS and based on my explicit rules I can automatically map the structure in my head without going back to the HTML.
By specifying the node name before the class or ID, the rule becomes more specific. If you want to override .foo { color:black; } for a div that has a class of foo, just do div.foo { color:red; }. Paragraphs that have a class of foo would be black, while divs would be red.
It can be useful if you want to serve different css rules based on HTML structure. In the rules below, Any span inside a div is red. Any direct span under #foo is blue.
CSS:
#foo div span { color:red; }
#foo span { color:blue; }
html for that:
<div id="foo"><span>blah</span> <div><span>blah</span></div> </div>
Live demo that you can play around with: http://jsfiddle.net/6dw2r/
EDIT:
div#foo matches a div with an id of foo.
div#foo div means any div descendants of #foo.
No. It doesn't.
Please read http://www.w3.org/TR/CSS2/selector.html#pattern-matching for further questions.
div.form-item-info{...} // all div elements that have class~=form-item-info
.form-item-info{...} // all elements that have class~=form-item-info
In HTML and XHTML, <div> and <span> are generic container elements. <div> is a block-level element. <span> is an inline element.
Most other elements (<h1>, <p>, <strong>, etc.) have specific semantic meanings. It's bad practice to use, say, a <p> element for something that's not a paragraph. But <div> is just a container.
If you need something to be purely decorative, or to group related elements, <div> is a good choice.
The tag defines a division or a
section in an HTML document.
The tag is often used to group
block-elements to format them with
styles.
http://www.w3schools.com/tags/tag_div.asp
They're just being explicit about their selectors, which tends to be a good thing, as you're being more specific when addressing the elements to be styled. (Smaller chance of conflicts and unintended styling.)
div.foo { rule }
div#bar { rule }
This means the rule only applies to div elements with class foo or id bar, and the rule would not apply to non-div elements with class foo or id bar.
.foo div { rule }
#bar div { rule }
This means the rule applies to all div elements inside any element with class foo or id bar. This is called a descendant selector.
#foo div span { rule }
#foo div p { rule }
When a div selector appears after an id or class, it is not required to have another selector after it. If there is such a selector, the rule will apply to the selected elements only if they are inside a div element which is inside an element having id foo.
You may want to read up on your selectors here:
http://www.w3.org/TR/CSS2/selector.html