I would like to be able to set the property list-style-type: none; on all li elements that contain a major header (<h1>, <h2> and <h3>).
At first I tried this -
li h1,
li h2,
li h3 {
list-style-type: none;
}
But then I realised it wouldn't work, because it is setting the property on the headers, not the list elements.
How can I do this?
You can assign a class to li items which contains header elements and set list-style to none.
For Example:
li.header {list-style:none;}
Try the following:
CSS:
li {
list-style-type: none;
}
HTML:
<ul>
<li><h1>test1</h1></li>
<li><h1>Test2</h1></li>
</ul>
Related
I have a template I am modifying. It links to a stylesheet that the following code to manipulate unordered lists.
ul {
float: left;
margin: 0 40px 16px 0;
padding: 0;
list-style: none;
}
I have a separate style sheet that has the following:
.featured_list ul {float: none; list-style: circle; list-style-position: inside;}
.featured_list li {margin: 5px;}
In my HTML code I reference my class like this
<ul class="featured_list">
Can anyone please tell me why my list is still set to float left tag? Thanks for any help.
For this markup
<ul class="featured_list">
you should be selecting it as
ul.featured_list {
styles here
}
You want this:
ul.featured_list
That is a ul with the class featured_list. Your selector is for a ul contained within an element with class featured_list.
The issue is with the way you are writing your selector for unordered list as:
.featured_list ul{float:none; list-style:circle; list-style-position:inside;}
This will try to find all ul elements which are child elements of element with class featured_list. Instead of this you can directly use the class name to apply the style to the list as:
.featured_list {float:none; list-style:circle; list-style-position:inside;}
DEMO:
If you cannot change the CSS file, then you want to wrap the ul with .featured_list:
<div class="featured_list">
<ul>...</ul>
</div>
If you can change the stylesheet, then you need to change the styles to:
ul.featured_list {}
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'm trying to apply a style to all li items as long as that item is not anywhere in a container with a class of .k-widget
.c-w1 ol li :not(.k-widget) { list-style: decimal outside; }
However the style continues to be applied. The .k-widget is on a div that contain divs that contain the actual li I don't want styled.
<div class="k-widget">
<Lots of Things>
<li> ....
Should be something like that:
div:not(.k-widget) .c-w1 ol li {
list-style: decimal outside;
}
Of course the :not() has to be applied on the div which is before the li as allready stated by Marijke Luttekes.
Also have a look at caniuse for browser support of css3 selectors.
Another possibility would be to tell the .k-widget contents to inherit its styles with list-style: inherit;. So you can override it without using a specific value and adding redundance to your styles:
div .c-w1 ol li {
list-style: decimal outside;
}
div.k-widget .c-w1 ol li {
list-style: inherit;
}
Currently the list style is applied to any item inside a li that does not have the class .k-widget applied. If I understand your problem correctly, you can easily fix this by placing the statement :not(.k-widget) before li.
The problem is that the :not() selector on a parent will match if any parent matches, and since all li elements are within both body and html, all li elements will match.
I would recommend constructing two styles, one overriding the other.
.c-w1 ol li { list-style: decimal outside; }
And
.c-w1 .k-widget ol li { override style here }
I'm having a problem with bullet points appearing alongside images on this site: http://docomomo-uk.co.uk/
I've tried using this code based on other posts with similar issues:
div#featured-widget-post ul {
list-style-type: none !important;
}
but no luck. Any suggestions? All help much appreciated.
You don't have the list surrounded by ul tags and you're referencing the element incorrectly with something that isn't there. Wrap your li item with ul
after you wrap your elements correctly, reference it as such...:
.featured-widget-post ul li {
list-style-type: none;
}
Check with
.featured-widget-post li{
list-style-type: none !important;
}
You use id selector instead of class selector.
You don't have ul tags.
Try this:
.featured-widget-post li {
list-style: none;
}
Your code wasn't working because .featured-widget-post is a class (always preceded by a dot (.)) and not an id (preceded by a pound symbol (#)) - and your li tags are not wrapped in a ul.
Apply this css inside your page.
li {
list-style-type: none; docomomo-uk.co.uk #3(line 159)
}
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo