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
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?)
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 */ }
For the HTML List below, I need to add a background image only to the LI of the outer list.
(aka the one with class "menu-mlid-594 dhtml-menu expanded start-collapsed")
HTML codes are:
<li class="menu-mlid-594 dhtml-menu expanded start-collapsed ">
About the Collection
<ul class="menu">
<li class="leaf first dhtml-menu ">By Theme</li>
<li class="leaf last dhtml-menu ">By Individual</li>
</ul>
</li>
How can I do that?
Thanks.
li.menu-mlid-594 { your css rules here }
The above will only apply to li elements that have the class menu-mlid-594
Kind of hard to say what will work with so little contextual information, but in general you'll usually need to rely on cascading rules:
#outerULIdentifier li {
background-image: url('someImage.jpg');
}
#outerULIdentifier li li {
background-image: none;
}
I am assuming here that there is an ID or class on the outermost UL that you can reference. Alternatively, you could do something like:
li.dhtml-menu {
background-image: url('someImage.jpg');
}
li.dhtml-menu.leaf {
background-image: none;
}
Although this latter version might have problems in IE 6 (which doesn't support multiple classes on a single element in a CSS selector very well).
ul li {background:#F00;} /* First level */
ul li li {background:#FFF;} /* Second level */
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{