I'm trying to style the first-child in a parent list:
ol:first-child > li {
color: red;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
https://jsfiddle.net/cvuw2bd1/1/
not the sublist. But if I close second list item before starting the sublist it works.
<li>Numbered list item 2</li>
<ol>...
As shown here:
ol:first-child > li {
color: red;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2</li>
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
<li>Numbered list item 3</li>
</ol>
https://jsfiddle.net/cvuw2bd1/
Unfortunately, I can't change the HTML only the CSS. Is there a way around this so that the sublist is excluded in the first example. (I can't add any classes or ids.)
The ol you are targeting with ol:first-child > li is the first, last and only child in the HTML structure. It has no siblings. The same goes for the nested ol.
The ol elements have vertical (ancestor-descendant), not lateral (sibling), relationships.
So don't use nth-child pseudo-classes. Use descendant combinators.
li {
color: red;
}
li li {
color: black;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
Also, when dealing with the color property, it's important to be familiar with the concept of inheritance. Here's an explanation:
CSS :not pseudo-class not working
You can apply style to the child element of li if you can not change the html
ol:first-child > li {
color: red;
}
li li{
color:black !important;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
last but not the least... If it does not work use important
Related
I have an <ol> tag (ordered list) in my HTML document.
I would like it to display items in the following format:
(i) Item 1
(ii) Item 2
(iii) Item 3
Currently I have it working with the following HTML code:
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This gives me the following result:
i. Item 1
ii. Item 2
iii. Item 3
Is it possible to display my list in the desired way I mentioned at the beginning of this question?
EDIT: Follow up question which is also part of accepted answer
How can I get wrapped items (items that are too long for one line) to automatically start new lines on the same tab line?
Using only CSS3, you can do it as follows:
ol {
counter-reset: increment_var;
list-style-type: none;
}
li:before {
display: inline-block;
content: "(" counter(increment_var, lower-roman) ") ";
counter-increment: increment_var;
width: 40px;
margin-left: -40px;
}
li {
margin-left: 40px;
}
<ol>
<li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
</ol>
There is a nested list, which looks like this:
Main-Title
Title 1
Element 1
Element 2
Element 3
Title 2
Element 4
HTML
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
Is it possible to display the list with CSS like this or do I have to change the HTML markup?
Main Title Title 1 Element 1
Element 2
Element 3
Title 2 Element 4
This looks more like a table with rowspan. I tried to do that with inline-flex:
CSS
li {
display: inline-flex;
}
But that doesn't work properly. Also there would be multiple elements like main title and so on.. the width of the 'cells' should be fixed.
JSFiddle: https://jsfiddle.net/mkc4uh9y/1/
This doesn't work for Safari.
And the list should be continued for multiple main elements. Here it will displayed to the right: https://jsfiddle.net/mkc4uh9y/4/
yes, reset sub li display:
li {
display: inline-flex;
}
li li {
display:flex;
}
https://jsfiddle.net/mkc4uh9y/2/
How to set numbering list with a custom number like this:
1). Item
2). Item
a). Sub Item
b). Sub Item
Please help....
You just need to add a list into another list, just like this:
<ol id="main">
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Item 3.1</li>
<li>Item 3.2</li>
</ol>
</ol>
than you can change what is in front of each item by CSS. For example like this:
ol#main {
list-style-type: decimal;
}
ol#main > ol {
list-style-type: lower-alpha;
}
more about list-style-type property: http://www.w3schools.com/cssref/pr_list-style-type.asp
more about list-style property: http://www.w3schools.com/cssref/pr_list-style.asp
In my application I have a page which lists some data grouped by categories.
Each item on the list can have subitems.
So I'd it to look like this:
List item
1.1 List item
1.2 List item
List item
2.1 List item
2.2 List item
I can achieve this easily using this three lines of css code:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
However on this page I have tabs for each category, which contains such nested list of items and I want to make index of first item of next tab to be x+1-th item, where x is number of last item from previous tab ( category ).
#tab 1
1. List item
1.1 List item
1.2 List item
2. List item
2.1 List item
2.2 List item
#tab 2
3. List item
3.1 List item
3.2 List item
4. List item
4.1 List item
4.2 List item
So I need functionality to provide starting index to <ol> tag. I found out that there is attribute start="x", however it doesn't work with these 3 lines of css code for nested lists.
Any idea how to do something like this?
Just remove the css, and correctly close and reopen <ol> tags.
If you need to split the list in two separate tabs, you have to close the first <ol> inside the first tab. Then, reopen the new list with the start parameter inside the second tab: <ol start="3">.
Working fiddle - (I set start="5" to show it's working; for your purposes, just set it to 3 or what you need)
UPDATE:
Keep the CSS, and wrap all the tabs in the main <ol> and </ol>, so the counter doesn't reset.
http://jsfiddle.net/qGCUk/227/
From http://www.w3.org/TR/css3-lists/#html4:
/* The start attribute on ol elements */
ol[start] {
counter-reset: list-item attr(start, integer, 1);
counter-increment: list-item -1;
}
Adding this to the CSS allowed the start attribute to be recognized in my tests.
EDIT:
Instead of using the start attribute, you can use CSS classes for each new starting point. The downside is that this will require more maintenance should you need to change anything.
CSS:
ol.start4
{
counter-reset: item 4;
counter-increment: item -1;
}
ol.start6
{
counter-reset: item 6;
counter-increment: item -1;
}
HTML:
<div>
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
<li>Item 3
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
</ol>
</div>
<div>
<ol class="start4">
<li>Item 4
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
<li>Item 5</li>
</ol>
</div>
<div>
<ol class="start6">
<li>Item 6</li>
<li>Item 7
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
</ol>
</div>
I have a menu like so:
<ul class="ipro_menu">
<li>Home</li>
<li class="active-parent">Menu Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.
So, in the above example, we would be viewing the "Subitem 2" page, so "Menu Item 1" is given the class active-parent.
I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here's what I have:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
The problem is that this is changing not only the active-parent element, but all of the li's in the sub-menu as well.
How do I change this to only change the font color of the specific element marked active-parent?
That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
Try putting the active-parent class on the HREF:
http://jsfiddle.net/RAkuc/
<ul class="ipro_menu">
<li>Home</li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
ul.ipro_menu a.active-parent {
color: #FF0000;
}
Use the direct children selector:
ul.ipro_menu li.active-parent > a {
color: #FF0000;
}
this will only affect direct descendants of your li element.