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.
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 read what MDN says about the child combinator:
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
What I don't understand is why the other two <li> elements are red, too.
.list > li:hover{
color:red
}
<ul class="list">
<li>I should be red
<ul>
<li>Why I am red too？</li>
<li>Why I am red too?</li>
</ul>
</li>
</ul>
With .list > li you are also including all the children of the parent list (which includes the second ul)
One way of overriding that is by explicitly setting the properties of the second list:
https://jsfiddle.net/6yeh6ggL/4/:
.list li a:hover{
color:red
}
.list ul li a:hover{
color:black
}
Just to help clarify a little.
Your selector is finding the li item you want which is the first one (it is only finding that one). The reason all the li's turn red is because color is set to the first li which is inherited by its children and in the case above those li's are its children.
Considering this markup:
<div id="container">
<div id="mainmenu">
<ul>
<li> <h1>My Dashboard</h1></li><br>
<li> <h1>About</h1></li><br>
<li> <h1>Contact</h1></li><br>
<li> <h1>Setttings</h1></li><br>
<li> <h1>Log Out</h1></li><br>
</ul>
</div>
</div>
Selecting this way is a valid thing? I am having issues with some properties.
#container ul li{
display: inline-block;
}
#mainmenu ul li a{}
#mainmenu ul li a:hover{}
full sample:
https://jsfiddle.net/jhr1q1q4/
I'm somewhat unsure what you're asking...
Strictly speaking, the selectors you provided are valid and would select the <a> elements within your #mainmenu element.
But I would ask: is the ul li part of the selectors necessary? You could rewrite both of them as
#mainmenu a {}
#mainmenu a:hover {}
and they would work the same and require less parsing. If you wanted to only select <a> elements that are descendants of <li> elements, you could keep the li in your selector; however, the ul is not necessary -- it is implied your <li> elements will be children of a <ul> (assuming you're writing valid HTML).
Another note: <a> elements are inline, meaning they're meant to act at the text level. <h1> elements, on the other hand, are block-level elements, and thus do not belong inside <a> elements. In fact, you usually shouldn't have more than one <h1> on a page, let alone be using <h1>'s to mark up menu items. If you want your menu items to be big like headers, use your CSS rules to style them that way.
I am having issues with some properties.
What properties are causing trouble?
I want to write a horizontal tag list as navigator. I read some css files online, and find the following (desendant?) selector style in a single css file:
nav ul li a { ...}
nav a {...}
nav ul li {...}
I know the for 2, nav a means select all the "a" elements under nav class. But what about 1. and 3.?
Does 3. means select all the "li" insinde "ul", and the "ul" should also inside "nav"? It seems to me that 1 and 2. will have similar effect. But I cannot find an answer online.
The first means that it will apply to all <a> elements inside a <li> which is inside <ul> which is within a <nav>. In other words, it will style code that looks like this:
<nav>
<ul>
<li>
<a>...</a>
</li>
</ul>
</nav>
The reason that selector 1 and selector 2 will apply to the same elements is because if you notice <nav><ul><li><a>...</a></li></ul></nav>, the <a> is both times inside the <nav><ul>...</ul></nav>. The first selector is just more restrictive than the second selector, but because everything inside a <ul> is always supposed to also be inside a <li> element, the selectors should always apply to the same elements.
The third selector will apply to <li> elements inside a <ul> which is inside a <nav>, just like you said. In other words:
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Edit: As #Hughes suggested, something to note here is the concept of "specificity." When there are multiple rules that apply to the same object, there is often times a need to break ties. For instance, what happens if we have this code?
nav ul a { color: blue; }
nav ul li a { color: green; }
It's up to CSS to determine which font colour to apply to <nav><ul><li><a> ... </a></li></ul></nav>. In these cases, CSS chooses the rule which is more specific when describing which elements it applies to. In this example, the <a> would be coloured green, because the nav ul li a rule is more specific when describing the elements that the rule should apply to (just think of the English definition for the word "specific"). Thus while both selector 1 and selector 2 from the question should apply to the same objects, if they ever both provide the same CSS property, the value in selector 1 would be chosen over the value in selector 2.
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.