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>
Related
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.
Before you mark this as duplicate: i've seen this Can you have <li>s without them being under a <ul> or <ol>? but they solve the problem by using styles.
Here is my question: can I have <li> items inside a <custom-tag> instead of <ul> or <ol> elements?
so something like this:
<ul>
<li>one</li>
<li>two</li>
<li>d</li>
<li>three</li>
</ul>
would look like this:
<custom-tag>
<li>one</li>
<li>two</li>
<li>d</li>
<li>three</li>
</custom-tag>
The context of the problem
I want to create a new component for simditor: a component for roman numerals on an orderer list, but it recognizes the ol as his "built-in" ol button... it seems like it uses the tag names to detect whether the button is active on a piece of the editor, so I want to fix this by using a tag with another name, right now, this solution seems easier than rewriting the whole library.
No, you can't.
4.4.7 The li element
Contexts in which this element can be used:
Inside ol elements.
Inside ul elements.
If you want to use custom elements for the lists, you could also use them for the items:
<unordered-list>
<list-item>one</list-item>
<list-item>two</list-item>
<list-item>d</list-item>
<list-item>three</list-item>
</unordered-list>
While li elements are not allowed to exist outside of ul and ol elements, it's worth nothing that while hacky, Chrome does seem to support this as a possibility (though I wouldn't recommend it).
roman {
display: block;
list-style-type: upper-roman;
margin: 1em 0;
padding: 0 0 0 40px;
}
<roman>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</roman>
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
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>
This is pretty straightforward.
I have the following HTML structure:
<ul id="myContactList">
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
...
</ul>
and the trouble maker CSS:
ul#myContactList>li>ul>li {
float:left; /* Trouble maker */
}
Here's the JSFiddle.
Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?
Thanks in advance, cheers! :)
It is targeting it, but you have an issue with the floats not being cleared in the last list item. See http://jsfiddle.net/ekXjy/4/ (specifically line 20 of the CSS, which causes a new float context for each list item).
ul#myContactList>li>ul {
list-style-type:none;
padding:0;
overflow: hidden; /* New style, to clear the floats contained within */
}
The clear:both you had for ul#myContactList>li>ul clears the floats for the list items preceding the last one, but nothing cleared the floats in the last item. Using overflow:hidden to give each list item its own block context fixes that.