<ul class="navTreeLevel0">
<li></li>
<li>
<li></li>
<ul class="navTreeLeve1">
<li>
<ul class="navTreeLevel2"></ul>
</li>
</ul>
</li>
</ul>
Any li could possibly have nth number of li that contain another ul level. Each ul level has an incrementing class navTreeLevel(++). I am hiding the levels past 2 now with the following css.
.navTreeLevel3, navTreeLevel4 {
display: none;
}
I don't control the html on the generation of this side bar. I want to be able to hide all levels after 2. (3,4,5,6,..) Is there a way to select the class by having all .navTreeLevel after 2?
It'd probably be easier to just hide all to start with and then show the ones you want.
ul[class^=navTreeLevel] {
display:none;
}
.navTreeLevel0,.navTreeLevel1,.navTreeLevel2 {
display:block;
}
Just pick the last level to show, and add ul after it:
.navTreeLeve2 ul {
display:none;
}
This hides all unordered lists below .navTreeLeve2.
These answers helped me rethink my approach to this problem. I came up with the solution of hiding the third level because everything within that level will be hidden as well.
ul.navTreeLevel3{
display: none;
}
With this nothing at level 3 or below will be visible.
Thank you for the answers.
Related
I have an unordered list on my webpage.
Home News About
- Weather
- Sports
- Local Events
I'd like to simply hide only the Home list item with CSS, here's what I have;
ul li:first-child { display: none; }
Clearly this will hide every single first li of every ul, even the nested elements. And here's the kicker, I cannot give it a class or ID. That being said, how can I target Home only via CSS?
<ul>
<li> ola1</li>
<li> ola2</li>
</ul>
<ul>
<li> xau1</li>
<li> xau2</li>
</ul>
ul:first-of-type li:first-of-type {
display: none;
}
http://codepen.io/Just14/pen/KaNvVN
You can access to the first li of the first ul
ul:first-child li:first-child { display: none; }
Is it possible to style an unordered list so that the second line and the ones after that are indented the same as the first line of the list item?
Please see the example for exactly what I mean
O----First Line
--SECOND LINE SHOULD START HERE
--EVERY OTHER LINE SHOULD BE LIKE THIS ALSO
Just to supplement my comment, here is a jsfiddle demonstrating what I mentioned. http://jsfiddle.net/R5ptL/
<ul>
<li>Parent</li>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
<li>Parent2</li>
</ul>
And if you want them to be the same style...
ul, li {
list-style-type: circle; /* or whatever style you choose */
}
EDIT: How to do this with multiple unordered lists AND CSS only: http://jsfiddle.net/R5ptL/1/
use the css first-child selector to apply the indent to every line other than the first.
ex:
ul li:first-child{margin:0px;}
ul li{margin:5px;}
li:not(first-child) {
margin-left: 20px;
}
or
li {
margin-left: 20px;
}
li:first-child {
margin-left: 0;
}
It's like this: (HTML solution, not CSS)
<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>
In short, you nest a complete new UL inside the primary UL.
My first answer was apparently incorrect after further testing. This should work though:
ul li {
text-indent:-10px;
margin-left:10px;
}
NOTE: This answer runs under the assumption that every line other than the first is simply wrapped text. If those other lines are meant to be sub-points, go with gwin003's answer.
I have a vertical menu like the one you can see HERE. The thing is - I want to have something like header. As you can seen, now my structure is this:
<div id="wrap">
<ul>
<li class="first">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
I could add another <div class="menu-header"> on top of the <ul> but I think that the it would be much easier and appropriate to just change the firs <li> item to looks like a header. However if I just add a class like I'm doing in the example the final output is the same (the styles are not overriden. I can use !important but this is kind of last resort.
Even though it's not a ton of CSS I would like to change only some things and other (like width for example) to be left as they are for all other elements. So how can I do this? Is there more CSS-like approach than just adding !important to each style I want to override?
There are two alternate ways to achieve this.
Alternate 1.
Use the first-child of the class first of the li which is a child of ul
ul li.first:first-child
For Instance,
ul li.first:first-child{
/* Your CSS Values. */
}
Alternate 2.
Use first-child of li which is nested inside its main parent #wrap (which is a unique identifier). Use this alternate only if you do not want to use the class first on li
#wrap ul li:first-child
For Instance,
#wrap ul li:first-child{
/* Your CSS Values. */
}
Hope this helps.
I'd give the CSS selector first-of-type a try.
li:first-of-type {
...
}
http://www.w3schools.com/cssref/sel_first-of-type.asp
Your problem with the example given is called specificity. Take a look here for a working example.
Without using of classes, to style the first-element of a list I suggest you to use the pseudo-class first-child.
#wrap ul li:first-child {
background: none;
color: #000;
}
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}
i know this might seem straightforward, but i can't solve it, im trying to make the whole list item linkable, rather than just the word home
the html code:
<li class="current">Home</li>
p.s. when you hover the li, background color changes, so i want that whole list item to be hyperlinked, if you get what i mean, not just the word
Wrapping a block level element (the li) within an inline-element (a), is invalid mark-up, which has the potential to throw errors, depending on your doctype. That being the case, first change your mark-up around to:
<li>link text</li>
Assuming that your li is display: block then the following will cause the a to 'fill' the available space:
a {
display: block;
width: 100%; /* this may, or may not, be necessary */
}
If you're using this for a horizontal list, and the li are display: inline, then you can use the following:
a {
display: inline-block;
}
And style-to-taste.
Do it in reverse
<li class="current">Home</li>
not sure what your other styles are but you can change the tag with something like
li.current a{
display:block;
}
This should do it:
HTML:
<li class="current">Home</li>
CSS:
li a {
display: block;
}
// or
li.current a {
display: block;
}