This may be a basic question but to me it is still confusing where I can use + or > in CSS.
I see many selectors like li > a or div + span etc. but I am not sure what the difference is and when to use them?
The > sign means select a direct descendant
Example:
CSS
div > ul {
list-style: none;
}
HTML
Here the style would apply to the <ul>
<div>
<ul>
</ul>
</div>
The + sign means select an adjacent sibling
Example:
CSS
p + p
{
font-weight: bold;
}
HTML
Here the style would apply to the latter <p>
<div>
<p></p>
<p></p>
</div>
The selectors are extensively explained in the W3 CSS spec, but here is a digest:
Immediate child selector
The > selector is the immediate child selector. In your example li > a, the rule would select any <a> element that is an immediate child of an <li> element.
The rule would select the anchor in this example:
<ul>
<li>An anchor</li>
</ul>
The adjacent sibling selector
The + selector is the adjacent sibling selector. In your example div + span, the rule would select any <span> elements that is immediately preceded by a <div> element, and where they both share the same parent.
The span element would be selected in this case:
<article>
<div>A preceding div element</div>
<span>This span would be selected</span>
</article>
The > is the direct child selector. In your example of li > a, this will only select <a> tags that are direct descendants of the <li>.
The + means siblings of the selected elements. In your example, div + span would select any <span>s next to a <div> (with the same parent).
li > a would only select a elements that are direct descendants of li elements. div + span would only select span elements that follow a div element.
Read more in #bažmegakapa's link: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
I'm not sure about the + sign but the > sign in css means direct child of, consider this
div > h1 { color: red; }
This will style all h1 tags that are a direct child of a div.
<h1>BLAH</h1>
<div>
<h1>BLAH</h1>
</div>
In that case the first h1 would be left alone, the second because it is a direct child of the div tag would be red.
Related
For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the > sign mean?
> is the child combinator, sometimes mistakenly called the direct descendant combinator.1
That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.
An illustration comparing the child combinator with the descendant combinator:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>
Which elements are matched by which selectors?
Matched by both div > p.some_class and div p.some_class
This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.
Matched by only div p.some_class
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.
1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".
> (greater-than sign) is a CSS Combinator.
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Note: < is not valid in CSS selectors.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
More information about CSS Combinators
As others mention, it's a child selector. Here's the appropriate link.
http://www.w3.org/TR/CSS2/selector.html#child-selectors
It matches p elements with class some_class that are directly under a div.
All p tags with class some_class which are direct children of a div tag.
( child selector) was introduced in css2.
div p{ } select all p elements decedent of div elements, whereas div > p selects only child p elements, not grand child, great grand child on so on.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
For more information on CSS Ce[lectors and their use, check my blog,
css selectors and css3 selectors
html
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
css
div > p.some_class{
color:red;
}
All the direct children that are <p> with .some_class would get the style applied to them.
The greater sign ( > ) selector in CSS means that the selector on the right is a direct descendant / child of whatever is on the left.
An example:
article > p { }
Means only style a paragraph that comes after an article.
I have this html:
<div class="leading-4">
<h2>title</h2>
<p>one para</p>
<p>Maybe another para</p>
<p><ul><li>.....</li></ul></p>
<h4>text</h4>
</div>
I want to edit the p that has the ul in it -
I thought about
.leading-4 p:nth-last-child(1){
}
and
.leading-4:nth-last-child(1){
}
but it doesn't' work either (though I didn't think it would)
What am i doing wrong please
What you want is last-of-type.
But as Praveen says you should fix your HTML. Use the W3C validator when in doubt.
You cannot have a <ul> inside a <p> tag! So when you put <p><ul></ul></p>, the browser considers it as <p></p><ul></ul>.
So technically, there's and cannot be <ul> inside a <p> so your CSS selector never ever selects an element under any case in HTML.
So, consider changing the element to <div> instead.
Proof:
p {color: red;}
ul {color: blue;}
p ul {color: green;}
<p>This is para</p>
<p>
The next UL element will be kicked out of P. Before UL.
<ul><li>This is LI inside UL inside P</li></ul>
After UL. And this becomes normal text under the body, and not under P.
</p>
<ul><li>This is LI inside UL</li></ul>
References:
ul element can never be a child of p element
is it acceptable to put a UL inside of a paragraph??
Solution:
The solution for selecting the last <p> for you would be:
p:last-of-type { /* rules */}
What is the difference between the following two CSS selectors?
From the explanation here, they sound the same?
div p{}
Selects all p elements inside div elements
div > p{}
Selects all p elements where the parent is a div element.
The difference is depth. What the w3schools site doesn't explain very well is that E>F only matches immediate children of E, while E F matches descendants of any depth.
Using your example CSS, consider the following HTML snippet:
<div>
<p id="paragraph1">I'm paragraph 1</p>
<ul>
<li><p id="paragraph2">I'm paragraph 2</p></li>
</ul>
</div>
The first ruleset, div p, will match both p blocks. The second one, div > p, will only match paragraph1.
div p{}
This one applies to all p inside div
div>p{}
This one says p needs to be a direct descendent of div
/*This one applies to all childrens (`span`) inside parent*/
div span {
color: red;
}
/*This one says child (`span`) needs to be a direct descendent of parent*/
div > span {
color: green;
}
<div>
<!--(`div`) does not represent an obstacle in both selectors-->
<div>
<span>I live in Duckburg.</span>
</div>
<ul>
<li>
<span>I live in Duckburg.</span>
</li>
</ul>
<span>I live in Duckburg.</span><br>
<span>I live in Duckburg.</span>
</div>
In WordPress, it uses li to declare the menu item, what is the difference between two CSS declaration #navigator > li and #navigator li?
Actually, this is not In WordPress, but is a CSS selector behavior:
The white space is a Descendant Selector that, by definition
matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child.
In your case, #navigator li will match all li at any nested level inside #navigator.
Example:
<ul id="#navigator">
<li> <!-- this is selected -->
<div>
<ul>
<li> <!-- this is selected -->
On the other hand
The > is a Child Selector, that:
matches only those elements matched by the second selector that are direct children of elements matched by the first.
In your case, #navigator > li will match only li that are direct childs of #navigator.
Example:
<ul id="#navigator">
<li> <!-- only this is selected -->
<div>
<ul>
<li>
The difference between those 2 is that the > selector (#navigator > li) means the immediate child and the #navigator li means all the li that have as ancestor the #navigator.
I am a bit confused between these 2 selectors.
Does the descendent selector:
div p
select all p within a div whether or not it's an immediate descedent? So if the p is inside another div it will still be selected?
Then the child selector:
div > p
Whats the difference? Does a child mean immediate child? Eg.
<div><p>
vs
<div><div><p>
will both be selected, or not?
Just think of what the words "child" and "descendant" mean in English:
My daughter is both my child and my descendant
My granddaughter is not my child, but she is my descendant.
Yes, you are correct. div p will match the following example, but div > p will not.
<div><table><tr><td><p> <!...
The first one is called descendant selector and the second one is called child selector.
Bascailly, "a b" selects all b's inside a, while "a>b" selects b's what are only children to the a, it will not select b what is child of b what is child of a.
This example illustrates the difference:
div span{background:red}
div>span{background:green}
<div><span>abc</span><span>def<span>ghi</span></span></div>
Background color of abc and def will be green, but ghi will have red background color.
IMPORTANT: If you change order of the rules to:
div>span{background:green}
div span{background:red}
All letters will have red background, because descendant selector selects child's too.
In theory:
Child => an immediate descendant of an ancestor (e.g. Joe and his father)
Descendant => any element that is descended from a particular ancestor (e.g. Joe and his great-great-grand-father)
In practice: try this HTML:
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
with this CSS:
span { color: red; }
div.one span { color: blue; }
div.two > span { color: green; }
http://jsfiddle.net/X343c/1/
Be aware that the child selector is not supported in Internet Explorer 6.
(If you use the selector in a jQuery/Prototype/YUI etc selector rather than in a style sheet it still works though)
div p
Selects all 'p' elements where at least one parent, grandparent etc. is a 'div' element
div > p
It means immediate children
Selects all 'p' elements where the parent is a 'div' element
div > p matches ps that have a div parent - <div><p> in your question
div p matches ps that have a div ancestor (parent, grandparent, great grandparent, etc.) - <div><p> and <div><div><p> in your question
CSS selection and applying style to a particular element can be done through traversing through the dom element
[Example
Example
.a .b .c .d{
background: #bdbdbd;
}
div>div>div>div:last-child{
background: red;
}
<div class='a'>The first paragraph.
<div class='b'>The second paragraph.
<div class='c'>The third paragraph.
<div class='d'>The fourth paragraph.</div>
<div class='e'>The fourth paragraph.</div>
</div>
</div>
</div>