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 }
Related
Please, don't confuse this question with others published on stackoverflow.
NOTE: Hide list with one element with pure CSS my question involves the parent tag.
I have these css rule:
ul {
padding: 5px;
}
ul > li:only-child {
display: none;
}
This rule hides the first ul tag when its only one.
But the space of the ul tag is still there.
How I can hide both ul and li when its onliy one li declared in my html?
The extra spacing you see even after hiding the li elements is because you have included a padding for the parent ul element.
So the solution is to remove the padding from the ul element and apply it on the child li elements.
I have defined a CSS for my basic document layout:
div#content li {
font-size:95%;
list-style-image:url(/css/bullet_list.gif);
line-height:1.5;
}
deeper down in one document, I'm including a CSS file defining
.codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
but the list element still displays the bullet graphic (bullet_list.gif) as if it would override the list-style-image: none; definition. Does anyone know why?
URL of the HTML document in question: http://www.psychotherapiepraxis.at/artikel/trauma/traumatherapie.phtml , the code in question is at the "Bewertung" section close to the end - the rating stars are covered by the bullets.
Try setting near enough the same elements as the original definition but include the selector.
div#content .codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
This should fix your problem.
You should apply list-style rules to UL(OL) tags and so far you are targeting LI(list item) tags
CSS specificity gives div#content li a value of 102 while .codexworld_rating_widget li gets a value of 11. You need to either add a parent with an ID to .codexworld_rating_widget li or remove the id from div#content li. This specificity calculator can be very handy.
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'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)
}
If I have a couple of bullet lits on a page and some lists contains normal text (no paragraph elements) and some contains links, is it possible to have no bullets on the links but bullets on the text items?
To remove all bullets I do:
#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none}
But if the item is a link I want to show the bullets. I tried with:
#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px;}
#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a ,
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a,
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none}
Without success, any ideas?
You would have to resort to server-side preprocessing or Javascript. There is no way in CSS to style an element based on what its children elements are, or to change a parent's style from a child element's style declaration. Here's the W3 CSS2 Selector Reference and the CSS3 working draft Selector reference, and neither of them mention parent selectors.
While you can not change the styling of a list element based whatever element(s) it contains, there is a pure CSS workaround that achieves more or less the same result :
Set block as the display property of all of your list elements
Set list-item as the display property of your link elements, along with a valid value for list-style-position and list-style-type.
So instead of making your list items look like a list item when they contain a link, you're just making the links inside your list items behave like a list item.
Your bullet will have the same color as your link, but that's about the only difference between this approach and the approach you had in mind (which is impossible).
EXAMPLE CODE :
#WebPartWPQ1 li {
margin-left: -25px;
display: block;
}
#WebPartWPQ1 li a {
display: list-item;
list-style-position: inside;
list-style-type: disk;
}
<ul id="WebPartWPQ1">
<li>Item 1 (ordinary item)</li>
<li><span>Item 2 (wrapped in a "span" tag)</span></li>
<li>Item 2 (wrapped in an "a" tag)</li>
</ul>
THE FIDDLE :
http://jsfiddle.net/6kt8jhfo/5/