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; }
Related
I have nested uls like this:
<ul>
<li>1...</li>
<li>2...</li>
<li id="li_3">
<ul>
<li id="li_3_1">3.1...</li>
</ul>
</li>
<li>4...</li>
</ul>
li_3 displays a bullet but I don't want it to since its children li already do (there are 2 bullets side to side near li_3_1).
So I wanted to select all the li having a ul as a direct child, something like this:
ul < li {
list-style-type: none;
}
But of course the selector < doesn't exist. What solutions do I have?
If you want to remove list-style in nested ul, this selector may be helpful.
ul > ul {
list-style: none;
}
You could just call the li directly using it's ID in CSS using this code:
#li_3 {
list-style-type: none;
}
Or if there are multiple you could just add a class to every li you want the bullet removed from and use the same code.
working:
#li_3 {
list-style-type: none;
}
<ul>
<li>1...</li>
<li>2...</li>
<li id="li_3">
<ul>
<li id="li_3_1">3.1...</li>
</ul>
</li>
<li>4...</li>
</ul>
Found it:
li:has(ul) {list-style-type: none;}
How can i select the"Automobiles" text and the unordered list right after that.
Without changing the html code.
I tried selecting it with- nav ul li
also tried with- nav:first-child ul:first-child
<nav>
<ul>
<li>Automobiles
<ul>
<li>812Superfast</li>
<li>GTC4Lusso</li>
<li>488GTB</li>
<li>488Spider</li>
</ul>
</li>
</ul>
Just separately define them them:
nav ul li, nav ul li ul {
...
}
Just for information: If you are able to modify the html code, you should use classes within the elements.
I have a CSS/HTML timeline like this one: http://bootsnipp.com/snippets/97QeW
It uses an unordered list to join the timeline cards. I now need to insert an unordered list inside the cards body and what happens is that the identation and the bullet icons type are inherited from the top-level card ul/li.
How can I reset or isolate a ul/li style inside the cards?
The snippet shows both what I'm getting now and what I need.
To remove bullets:
ul {
list-style: none;
}
you can also assign a class to isolate, as it is in your shared snippet would be a circle:
ul.class {
list-style-type: circle;
}
ul {
list-style-type: disc;
}
ul.ul2 {
list-style-type: circle;
}
<ul>
<li>foo</li>
<ul class="ul2">
<li>
bar
</li>
</ul>
</ul>
The best way to target the unordered list is like so:
ul li > ul li {
list-style:none;
}
<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.
**Thank you for your answers. I am waiting on a Cache plugin to be removed before I can test and confirm everythign is working correctly.
I have a unordered list that contains some sublist. All I want to update are the Children of the main <ul> "Names" and "Jobs"
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
I want the ability to only style the child <li>'s of my main <ul> not any of the sub items. The trick is I can not add any classes or id's to the list or sublist. I can put the whole thing in a containing div.
*NOTE if i add a class or ID to my it will add it to all of them. This is a premade template i have no control over.
I was thinking I could do this:
<div id="mylist_container">
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
</div>
And style it like this:
#mylist_container ul>l1{
font:bold 18px arial;
}
I think you answered your own question! Or at least 99% of the way. Create one more child selector by adding > between #mylist_container and ul. This will only target a ul that is a child of #mylist_container and not go any deeper in the structure.
#mylist_container > ul > li { /* your styles */ }
Try
#mylist_container > ul > li {
font: bold 18px arial;
}
#mylist_container > ul > li ul{
font: normal 10px arial; //assign the default view here
}
Demo: Fiddle
take a look at my code example.
The first targets all <li> and the second targets only <li> inside of another <li>.
ul>li{
any styles in here form the top level li
}
ul>li>ul>li{
styles to cancel out the first styles
}
try this..
div ul li ul li{
color:#000000;
}
div ul li{
color:red;
}
http://jsfiddle.net/Mk3g4/