Well, I finally decided to totally drop IE6. It's great. First big benefit which comes with this decision is child selectors. So I started to use them for my nested drop-down menus for the first time and expected it to be a breeze. But... here's the code:
<style>
body {
color:#000;
}
ul.top > li {
color:red;
}
<ul class="top">
<li>top li</li>
<li>
<ul class="sub">
<li>sub li</li>
<li>sub li</li>
</ul>
</li>
</ul>
What I expected here, that only immediate children of .top unordered list are colored red and all the rest are black. Isn't it a logical thing to expect? But they all actually get red...
try
ul.top > li {
color:red;
}
ul.sub > li {
color:black;
}
??
Tim gave you the solution. The explanation for this behaviour is that though color: red; is only applied to the top-level lis, the color is inherited by their descendants. Check CSS Inheritance at Dorward Online for an in-depth explanation.
Well you see the red color is applied to both the first and the second element in the list .top, now the second element does not have any style information for color applied, so therefore it uses the style of the parent witch has the color red.
Unfortunately the child selector causing all the li to inherit the class. So you'll need to define another child ul.sub > li{
Related
So i have a page like this :
<body>
<ul>
<li><span class="first">First</span></li>
<li><span class="second">Second</span></li>
<li><span class="third">Third</span></li>
<li><span class="fourth">Fourth</span></li>
</ul>
</body>
I want to change the style of the "li" tags that are only in the first and the second span.
I tried this .first,.second li{margin-left:10px;}, but it didn't work.
The comma needs to separate COMPLETE element paths:
.first li, .second li
{margin-left:10px;}
I've wasted enough time explaining why I didn't mention your improper formatting that I might as well correct you on it at this point;
<body>
<ul>
<li class="first">First</li>
<li class="second">Second</li>
<li class="third">Third</li>
<li class="fourth">Fourth</li>
</ul>
</body>
CSS:
li.first, li.second {
margin-left:10px;
}
If we're really going to travel down this rabbit hole and teach code, might as well mention this can be done entirely without classes:
ul li:nth-child(1), ul li:nth-child(2)
{
margin-left:10px;
}
The li has to follow each parent element, you can't group the parents together and then expect the child to apply to each of them. What you were asking for is for the style to apply to all li that are children of elements with class=second, and to all elements with class=first, not to all li that are children of elements with class=first
.first li, .second li { margin-left:10px }
https://jsfiddle.net/udnjqqkh/
.first li {margin-left:10px;}
.second li {margin-left:10px;}
How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.
So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
You want the child combinator, ">"
.upper > li
You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)
Is there any way to style this list using pure css so all elements above my cursor will be highlighted ?
<ul>
<li>first</li>
<ul>
<li>first.first</li>
<ul>
<li>first.first.first</li>
<li>second.second.second</li>
<li>third.third.third</li>
</ul>
<li>second.second</li>
<li>third.third</li>
</ul>
<li>second</li>
<li>third</li>
</ul>
I want to style this list this way: When I hover cursor over "second" everything will be highlighted expect third. When i go over third.third everything will be highlighted expect second and third etc...
I was able to achieve something very similar as described here
css :hover effect on current and previous elements
however I want something slightly different
Thanks
We can't go back, but we can go forward with ~, so we can highlight everything and turn off highlight for everything after current element.
ul li:hover {
background: red;
}
ul li:hover ~ li,
ul li:hover ~ li li {
background: none;
}
JSFiddle
Whats the difference of use CSS like this:
.mainHeader nav ul li {.....
compared with just this:
.mainHeader li {.....
It works fine with just the latter alternative. Since I don't have any other nav or ul in the mainHeader, I guess it's ok to just use the latter one?
What if you have HTML like this?
<div class="mainHeader">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item
<ul><li>With submenu</li></ul>
</li>
</ul>
</nav>
</div>
Now, if you wanted to only style a "Menu item" and submenu items separately, the only way to do so specifically is with the following selectors:
.mainHeader nav>ul>li { /* menu item */ }
.mainHeader li>ul>li { /* submenu item */ }
Using the > combinator is important here, to ensure you are styling the right element. .mainHeader li alone will not do.
As long as you will never include any other matching elements, it's okay (where okay means "it will work"). A good approach is to add a class to your ul and select it that way:
ul.my-menu li {
/* CSS styles */
}
And - by the way - I guess mainHeader is not the tag name. If it is an identifier, you must use #mainHeader and .mainHeader if it is a class. (You changed it)
<div id="mainHeader">
<ul><li>facebook</li><li>twiiter</li></ul>
<div id="nav">
<ul><li>Home</li><li>About</li><li>Information</li><li>Contact</li></ul>
</div>
</div>
So #mainHeader li{....} will do all li in div
and #mainHeader nav ul li {....} will overwrite for the nav bar
Adding a class to each ul or adding > will make the code stronger when it is edited in future like suggested above.
The difference is only one thing, you can list any type of element next to .mainHeader for example, #mainHeader a p code div nav span ul li. This will give all of these elements with an ID of mainHeader the CSS you place in the { } for that element.
I'll give you an example.
HTML:
<div class="mainHeader">This text is black because "mainHeader".</div>
<a class="mainHeader" href="#">This text is black because "mainHeader".</a>
<p class="mainHeader">This text is black because "mainHeader".</p>
<nav class="mainHeader">This text is black because "mainHeader".</nav>
<span class="mainHeader">This text is black because "mainHeader".</span>
CSS:
.mainHeader div a p nav span {
color: #000;
}
Update(1): Please understand that doing this is recommended if you are going to give multiple elements the same aspect for a specific thing. An example of this usage, say you want div a p to have the same color, you would achieve this by div a p { color: #000; /* color your wanted */ }
What is the difference between ul > li > a {...} and ul li a {...} in CSS?
Which one is more efficient and why?
">" is the child selector
"" is the descendant selector
The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum.
A child element is simply one that is directly contained within the parent element:
<foo> <!-- parent -->
<bar> <!-- child of foo, descendant of foo -->
<baz> <!-- descendant of foo -->
</baz>
</bar>
</foo>
for this example, foo * would match <bar> and <baz>, whereas foo > * would only match <bar>.
As for your second question:
Which one is more efficient and why?
I'm not actually going to answer this question as it's completely irrelevant to development. CSS rendering engines are so fast that there is almost never* a reason to optimize CSS selectors beyond making them as short as possible.
Instead of worrying about micro-optimizations, focus on writing selectors that make sense for the case at hand. I often use > selectors when styling nested lists, because it's important to distinguish which level of the list is being styled.
* if it genuinely is an issue in rendering the page, you've probably got too many elements on the page, or too much CSS. Then you'll have to run some tests to see what the actual issue is.
ul>li selects all li that are a direct child of ul whereas ul li selects all li that are anywhere within (descending as deep as you like) a ul
For HTML:
<ul>
<li><span><a href='#'>Something</a></span></li>
<li><a href='#'>or Other</a></li>
</ul>
And CSS:
li a{ color: green; }
li>a{ color: red; }
The colour of Something will remain green but or Other will be red
Part 2, you should write the rule to be appropriate to the situation, I think the speed difference would be incredibly small, and probably overshadowed by the extra characters involved in writing more code, and definitely overshadowed by the time taken by the developer to think about it.
However, as a rule of thumb, the more specific you are with your rules, the faster the CSS engines can locate the DOM elements you want to apply it to, so I expect li>a is faster than li a as the DOM search can be cut short earlier. It also means that nested anchors are not styled with that rule, is that what you want? <~~ much more pertinent question.
ul > li > a selects only the direct children. In this case only the first level <a> of the first level <li> inside the <ul> will be selected.
ul li a on the other hand will select ALL <a>-s in ALL <li>-s in the unordered list
Example of ul > li
ul > li.bg {
background: red;
}
<ul>
<li class="bg">affected</li>
<li class="bg">affected</li>
<li>
<ol>
<li class="bg">NOT affected</li>
<li class="bg">NOT affected</li>
</ol>
</li>
</ul>
if you'd be using ul li - ALL of the li-s would be affected
UPDATE The order of more to less efficient CSS selectors goes thus:
ID, e.g.#header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover
So your better bet is to use the children selector instead of just descendant. However the difference on a regular page (without tens of thousands elements to go through) might be absolutely negligible.
1) for example HTML code:
<ul>
<li>
firstlink
<span><a href="#">second link</a>
</li>
</ul>
and css rules:
1) ul li a {color:red;}
2) ul > li > a {color:blue;}
">" - symbol mean that that will be searching only child selector (parentTag > childTag)
so first css rule will apply to all links (first and second)
and second rule will apply anly to first link
2) As for efficiency - I think second will be more fast - as in case with JavaScript selectors. This rule read from right to left, this mean that when rule will parse by browser, it get all links on page:
- in first case it will find all parent elements for each link on page and filter all links where exist parent tags "ul" and "li"
- in second case it will check only parent node of link if it is "li" tag then -> check if parent tag of "li" is "ul"
some thing like this.
Hope I describe all properly for you
Here > a to specifiy the color for root of li.active.menu-item
#primary-menu > li.active.menu-item > a
#primary-menu>li.active.menu-item>a {
color: #c19b66;
}
<ul id="primary-menu">
<li class="active menu-item"><a>Coffee</a>
<ul id="sub-menu">
<li class="active menu-item"><a>aaa</a></li>
<li class="menu-item"><a>bbb</a></li>
<li class="menu-item"><a>ccc</a></li>
</ul>
</li>
<li class="menu-item"><a>Tea</a></li>
<li class="menu-item"><a>Coca Cola</a></li>
</ul>
to answer to your second question - performance IS affected - if you are using those selectors with a single (no nested) ul:
<ul>
<li>jjj</li>
<li>jjj</li>
<li>jjj</li>
</ul>
the child selector ul > li is more performant than ul li because it is more specific. the browser traverse the dom "right to left", so when it finds a li it then looks for a any ul as a parent in the case of a child selector, while it has to traverse the whole dom tree to find any ul ancestors in case of the descendant selector