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;
}
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;}
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; }
I a have a problem with displaying bullets in ul.
Does anyone know where the problem is?
my site and it starts with Co od vás očekáváme
Your <li> tags have the display: block CSS rule that is overriding the default behaviour. The <li> elements have display: list-item to been displayed as default, with bullets. You can make something like this (based on your HTML structure):
section ul li {
display: list-item;
}
And it works automaticaly (only inside <section> <ul> places).
You have used the default styling of ul in your site.
What you can do is you can add a separate class to ul element, for eg bullets like this :-
CSS :-
.bullets {
}
.bullets li {
list-style-type: circle;
}
HTML :-
<ul class="bullets">
<li>dobrý zdravotní stav bez omezení, potravinářský průkaz</li>
<li>manuální zručnost v kuchyni – rychlost, přesnost, šikovnost a pečlivost – bez toho to nejde</li>
<li>samostatnost a zodpovědnost</li>
<li>radost z prodeje</li>
<li>aktivní komunikaci se zákazníkem.</li>
</ul>
I want to make a list with list-style-type: disc; to list some programs.
But the list-items don't get this "disc" and have scrollbars , i don't know why... look here (Link).
It just should be a list with the disc-icon and no scrollbars on the right for every list-tiem.
html:
<ul>
<li>flashtool</li>
<li>test</li>
</ul>
css:
ul {
list-style-type: disc;
}
The problem is in the declaration of the following class.
main > ul li
{
overflow:auto;
}
The above code will point the first level ul under main. That is perfect. But look at the next selector. It will select all the child-selector of li. This is wrong in your case. It should point only first level of li also. Update the code like below. It will work.
main > ul > li
{
overflow:auto;
}
The reason why your list-style-type is not working is the absence of list-style-position: inside. So your CSS need the following modification:
main > ul li .content > ul {
list-style-type: disc;
list-style-position: inside;
}
in your common.css line number 4
Use
.content ul{
list-style-type:disc;
list-style-position:inside;
}
if you want to remove scrollbar set overflow:hidden
I am seeing two different ways of referring to the unordered lists (<ul>), list items (<li>) and anchors (<a>).
I want to set the attributes of these items in a drop down list with at least two levels of nested <ul>.
My question is specifically about the ways to refer to the different levels of <ul>, <li> and <a> there in.
I have named the navigation bar id="navBar".
I have seen on youtube: Building a drop down navigation bar
The syntax used is:
ul#navBar .sub1 li
ul#navBar .sub1 li a
Where the class ".sub1" has been defined, and is the first level of nested <ul>, and ".sub2" is the second level of nested <ul>.
Referencing these levels, the code used is.
ul#navBar .sub2 a {
background-color: blue;}
ul#navBar li:hover > a {
background-color: #CFC;
}
It seems to me, that going to the bother of defining .sub1 and .sub2 is superfluous, and I have been using the format:
#navBar ul li{ background-color: blue;}
#navBar ul li:hover ul{ background-color: red;}
REAL QUESTION:
What is the correct syntax, using my (code just above) style of formatting. To refer to a second level nested <ul> and affect the <li> or the <a> there in?
I assumed it was along the lines of:
#navBar ul li ul li: hover ul{ background-color: red;}
But I am wrong :(
First note that there should never be a space before :hover.
So the basic HTML structure you're outlining is:
<ul id="navbar">
<li>
<ul class="sub1">
<li>
<ul class="sub2">
<li><a>Text</a><li>
</ul>
</li>
</ul>
</li>
</ul>
To refer to the li and a within .sub2, you'd write:
#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }
The reason the tutorial assigned classes is because using generic nested element is a really inefficient way of using CSS selectors; it's faster to use classes. For more info, see this article from CSS-Tricks.
#navnar ul
{/*some style*/} Folder
#navbar ul ul
{/*some style*/} sub-folder
#navbar ul li:hover
{/*some style*/}
#navbar ul ul li:hover
{/*some style*/}
I think this is what you're after.
check out this tutorial for more info- css3-animated-dropdown-menu