This question already has answers here:
How do I remove a specific bullet point within a ul in CSS?
(2 answers)
Closed 9 years ago.
Let's say as an example, I have two lists.
1st:
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
</ul>
2nd:
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
</ul>
I'd like to remove the list-style (just the icon) from TEST 4 in the first list and the list-style (again, just the icon) from TEST 3 from the second list.
How can I achieve this?
Working jsFiddle here.
Using nth-last-child(2) is one option, as shown here.
li:nth-last-child(2) {
list-style-type: none;
}
<ul>
<li>TEST 1</li>
<li style='list-style-type:none;'>TEST 2</li>
<li>TEST 3</li>
</ul>
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li style='list-style-type:none;'>TEST 3</li>
<li>TEST 4</li>
</ul>
Related
ol::before:marker {
font-size: 120%;
color: #00b7a8;
font-family: "Comic Sans MS", cursive, sans-serif;
content: '√';
}
I want to add "√" before ::marker element and this is my CSS code, but it's no use，could you help me?
Add symbol with class
ol>li.checked::marker {
content: "√ " counter(list-item) ". ";
}
ul>li.checked::before {
content: "√";
margin-left: -30px;
margin-right: 21px;
}
<h3>Ordered</h3>
<ol>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h3>Unordered</h3>
<ul>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
<h3>Nested list</h3>
<ul>
<li class='checked'>
<ol>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>
<ul>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 5</li>
</ol>
</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
</ul>
Add symbol without class
ol>li::marker {
content: "√ " counter(list-item) ". ";
}
ul>li::before {
content: "√";
margin-left: -30px;
margin-right: 21px;
}
<h3>Ordered</h3>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h3>Unordered</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
<h3>Nested list</h3>
<ul>
<li>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 5</li>
</ol>
</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
If you don't want to use a class then use :nth-* to specify which <li> to style. Just style the ::marker pseudo-element, it gets too crowded with ::before added in. The content: can be manually filled. The normal ::marker for a <li> inside an <ol> is a number and a dot (ex: 1.) so include that and add anything behind it, in front of it, etc..
li:first-of-type::marker {
content: '✔️/*space*/1./*space*/'
}
li:first-of-type::marker {
content: '✔️ 1. ';
}
<ol>
<li>...I</li>
<li>...II</li>
<li>...III</li>
<li>...IV</li>
<li>...V</li>
</ol>
This is what I have:
And this is what I want:
I cannot easily change the DOM structure as I am working with a WordPress list generated via creating a new menu. I have tried different techniques such as Flexbox and grid but I just cannot seem to get the results I am after. I'd love it if someone could help here. Thank you.
https://codepen.io/WayneHaworth/pen/BGzzpr
<div class="container">
<ul id="main-menu">
<li>
<span>List 1</span>
<ul class="inner-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
<li>
<span>List 2</span>
<ul class="inner-list">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
...etc
</ul>
</div>
As per #Doug's comment, adding a CSS column to the outside UL fixed this.
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 5;
Can you please take a look at this demo and let me know why I am not able to not add the css rule to the first item using the not option?
li:not(first) {
color: red;
}
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
You probably meant :not(:first-child) (there is no CSS first). There is :first but that's for printing:
The :first #page CSS pseudo-class describes the styling of the first
page when printing a document.
li:not(:first-child){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
You could also do li:not(:first-of-type):
li:not(:first-of-type){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Or li:not(:nth-child(1)):
li:not(:nth-child(1)){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Or li:not(:nth-of-type(1)):
li:not(:nth-of-type(1)){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
By the way, if you're wondering why the inner list doesnt have its first element's color changed it because color is an inherited property.
You got the syntax wrong
li:not(:first-child)
Here is my problem is there a way to wrap WordPress UL submenu to div?
WordPress output is this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</li>
</ul>
And I need to get this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<div class="wrap">
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</div>
</li>
</ul>
Using $.fn.wrap:
$('.sub-menu').wrap('<div class="wrap">');
I have a multi-level horizontal menu with unknown number of top level and sub level menus. I want to display this menu as a single line and display as many as the display width will allow. I'm planning to then put all the menu items in a modal dialogue box which the icon is right justified in the menu.
I'm using zurb foundation 5 and I need the menu to cater for different screen widths but I'm 99.9% certain this is a css problem, not foundation. (ie I don't want to code for medium/large/xlarge)
My problem is that I'm having trouble limiting the menu to a single level. It spills/overflows onto subsequent lines but if I specify a height and overflow:hidden, it then breaks the multi-level sub levels of the menu.
I've created a jsfiddle here http://jsfiddle.net/gavtwtd/4tkpoL74/6/
but please note you may have to widen the result pane to see the problem.
Ah, I must accompany jsfiddle with my code, so here's some code:
<div class="sticky">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li>☰</li>
</ul>
<ul class="left" style="width:90%;">
<li class="has-dropdown">Menu 1
<ul class="dropdown">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
<li>Sub menu 4</li>
<li>Sub menu 5</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 99</li>
</ul>
</section>
</nav>
</div>
<div id="myModal" class="reveal-modal" data-reveal>full menu here <a class="close-reveal-modal">×</a></div>