ol li{
color: blue;
}
ol ol li {
color:black;
}
ol ol {
list-style: upper-alpha;
<ol>
<b><li>Topic 1</li></b>
<ol>
<li> Sub Topic 1</li>
<li> Sub Topic 2</li>
<li> Sub Topic 3</li>
</ol>
<b><li>Topic 2</li></b>
<b><li>Topic 3</li></b>
<ol>
<li>Sub Topic 1</li>
<li>Sub Topic 2</li>
<li>Sub Topic 3</li>
</ol>
</ol>
Simple question I hope. The first level of an <ol> is always a heading. Trying to style
ol li {
font-size:larger;
}
without changing ol ol li or other children.
So much thanks!
Edit:
HTML structure is
<ol>
<b><li>Topic</li></b>
<ol>
<li> Sub Topic 1 </li>
<li> Sub Topic 2 </li>
</ol>
<b><li>Topic 2</li></b>
</ol>
The goal is to remove the need for the bold tags.
It's a bit unclear what you are asking: "The first level of an ol is always a heading" - Do you really mean a heading like <h1>, <h2> etc., or do you mean that you want to apply a special styling to the first <li> inside every <ol> tag ?
In the latter case, you can use a :first-child selector, like
ol > li:first-child {
font-size:larger;
}
In case you want to apply a special styling to any first child if every <ol> tag, you can use the general * selector, combined with :first-child
ol > *:first-child {
font-size:larger;
}
(Although I doubt that anything else than an li as a direct child of an ol would be valid HTML)
Addition after edit of question:
Since your ol will be inside some other element, you can use the following selector to adess only direct ("first-level") children of the ol. (I applied a class to the parent element and used that in the selector)
.parent>ol>li {
font-weight: bold;
}
<div class="parent">
<ol>
<li>Topic</li>
<ol>
<li> Sub Topic 1 </li>
<li> Sub Topic 2 </li>
</ol>
<li>Topic 2</li>
</ol>
</div>
If it is inside a certain container always (for example .container), you can do so:
.container > ol > li {
font-size:larger;
}
Here it would only apply it to direct child ol and that only to direct child of that.
Related
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
I have a page with about 10 lists, 5 are unordered and 5 are ordered. Rather than the generic disc or bullet/number or Roman numeral I've decided to make up a custom list marker. Each list item is as so...
<ul>
<li>*List Item 1</li>
<li>*List Item 2</li>
</ul>
<ol>
<li>1List Item</li>
<li>1List Item</li>
</ol>
What I need to do is select the initial character being 1, 2 or *. Without using span 100 times or separate stylings for ul and ol, is there a way to select the first character.
I have tried using spans but with that many lists and list items there becomes a lot of extra coding...I've also tried
li::first-letter {...}
This works for the ul, but for ol it results in e.g. "*L" from "*List Item".
I've read a little into ":before", this would probably be the next best thing but I'm hoping there's a selector to do all li's.
Thanks for any info.
EDIT:
I have found the solution using a combination of ::first-letter and ::before, like so...
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
<ol>
<li>1List Item 1</li>
<li>2List Item 2</li>
</ol>
ol li::first-letter, ul li::before {
... // select's all ol and all ul list items
}
ul li::before {
content: "*";
... // adds * as first letter for above
}
I think Javascript would be best here.
var liArray = document.getElementsByTagName('li').innerHTML;
for(i=0;i<liArray.length;i++){
var buildString = '<span class="customStyle">';
buildString += liArray[i].subString(0,1);
buildString += '</span>';
buildString += liArray[i].subString(1);
liArray[i].innerHTML = buildString;
}
To quickly explain the code. We start off by selecting all the list elements in your document and saving them into an array called "liArray".
Then we loop through that array in a for loop applying our code to each element.
Then we build a "new" string that takes the first character of each list element and wraps it in a span tag with the class "customStyle".
That will let you apply any styling you want to only the first character of the li just by adding the class "customStyle" to your css document.
body ul li:nth-child(odd){
background-color: #f22cf2;
}
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(1) {
background: red;}
ol li:nth-child(1) {
background: red;}
</style>
</head>
<body>
<ul>
<li>*List Item 1</li>
<li>*List Item 2</li>
</ul>
<ol>
<li>1List Item</li>
<li>1List Item</li>
</ol>
</body>
</html>
I have the following ul list:
<ul class="list">
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<ul>
How can I apply CSS style to last li of parent class="list", not for nested ul inside ul
You need last-of-type and >
.list > li:last-of-type {
color: red;
}
<ul class="list">
<li>a
<ul>
<li>a</li>
</ul>
</li>
<li>c</li>
</ul>
As you mention that you want last element of li's parent you use last-of-type selector, which matches every element that is the last child of a particular type, of its parent.
Second, to only match the outer most li and not nested one's, you use the child selecor > which in this case says: match the last of type which is an immediate child of an element having a class named .list
You also want to have a look at this.
try this
demo
css
ul.main > li > ul> li:first-child > a {
background:green;
}
DIRECT CHILD SELECTOR (CSS3):
ul.list >li:last-of-type{
color:red;
}
<ul class="list">
<li>Parent First Child
<ul>
<li>Child</li>
</ul>
</li>
<li>Parent Another Child</li>
<li>Parent Last Child</li>
<ul>
Note : > is used for selecting direct child of ul.list
Here is the details about CSS Pseudo-classes
I'm trying to use :not() to ignore the .current class in the first list item.
HTML:
<ul>
<li class="current">Home</li>
<li><a href="#">Page 2</a</li>
<li>Page 3</li>
</ul>
CSS:
ul li a:not(.current){color:red}
I can't get the :not() to ignore the .current class.
I have also tried:
ul li a:not(.current a){color:red}
Fiddle
the :not applies to element in use, so apply to li which is using current in this case
plus, not sure if was a typo, but in your second li, the a was missing a < in closing tag
ul li:not(.current) a {
color:red
}
<ul>
<li class="current">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
Your class is on the li element in your html so:
ul li:not(.current) a { color: red; }
should work.
Just trying to style the first ul li a only without styling the sub ul li a. I realize there is no such thing as parent selectors in CSS and proably for good reasons, so how would I accomplish this without assigning all of the li's a class? Maybe this is impossible, which is why I am asking. Here is the HTML.
<div id="myDiv">
<h2>Headline 2</h2>
<div>
<p>Some Paragraph 1</p>
<ul class="list">
<li>List 1 Item 1 (=)</li>
<li>List 1 Item 2 (=)
<ul>
<li>List 1 Item 2a</li>
<li>List 1 Item 2b</li>
</ul>
</li>
<li>List 1 Item 3 (=)</li>
</ul>
</div>
<p>Some paragraph 2</p>
<div>
<ul>
<li>List 2 Item 1</li>
<li>List 2 Item 2</li>
</ul>
</div>
</div>
Here is what I would like to target
Again, I realize I could just add classes to all of them and get the result I want, I just want to know if there is another way.
Using css selectors, here is how I could target the sublist (not what I want)
ul.list li > ul li a{
...
}
Targeting the first ul plus the sublist (not what I want)
ul.list > li a{
...
}
Here is a fiddle for you convience.
http://jsfiddle.net/94e2fo30/
The difference between the first list and its sublist is that the first is preceded by a p.
p + ul > li > a {
color: red;
}
will give:
#myDiv > div > ul > li > a{color:red}
since both your parent li's are direct children of ul's which are direct children of divs which are children of #myDiv
This will work in your case, but I wouldn't recommend doing it. Anytime css starts too look like this you'll want to rethink your organization