I have the following HTML:
...
<li>...</li>
<li>...</li>
<li class="last">...</li>
<li class="selected">...</li> # <- this
<li>...</li> # <- this
<li class="last">...</li> # <- this
<li>...</li>
<li>...</li>
<li class="last">...</li>
....
So, basically groups of three lis, the last one with a specific class and in one of the groups the first li with a special class.
Is there a way with pure CSS to select the li with the selected class and the next two ones, marked in the above code?
I've managed to select the next one using li.selected + li, but this doesn't work for the one after that.
Simply add another + li to reach it:
li.selected, li.selected + li, li.selected + li + li
Related
I'm really confused as to how I can style this list WITHOUT changing the following HTML or wrapping it in class names. How do I go about this?
For example, if I want to put Ocean Fish in bold but NOT have Pacific or Atlantic affected, how do I target that div without adding a class name?
Another example, I want to have "12 salmon" and "3 cod" in green text, and "46 halibut" and "13 pollock" in blue text? in I know there's a trick using very specific selectors, but I don't know how.
<ul>
<li>
<div>Ocean Fish</div>
<ul>
<li>
<div>Pacific</div>
<ul>
<li>12 salmon</li>
<li>3 cod</li>
</ul>
</li>
</ul>
<ul>
<li>
<div>Atlantic</div>
<ul>
<li>46 halibut</li>
<li>13 pollock</li>
</ul>
</li>
</ul>
</li>
</ul>```
This will handle all your cases if you want to do it without classes.
body > ul > li > div{font-weight:bold;}
body > ul > li > ul:nth-child(2) > li > ul{color:green;}
body > ul > li > ul:nth-child(3) > li > ul{color:blue;}
Similar method to previous answer, but more direct:
let divSel = document.querySelectorAll('div'); // alert(divSel.length);
divSel[0].style.fontWeight = 'bolder';
let liSel = document.querySelectorAll('li');
liSel[2].style.color = 'green';
liSel[3].style.color = 'green';
liSel[5].style.color = 'blue';
liSel[6].style.color = 'blue';
Still a pain to modify if entry order is changed.
I'm currently working on a project converting some training materials from one e-learning system to another, and I'm trying to preserve original formatting where I can (especially when lists tie into images), and this has involved picking up some HTML/CSS commands to help recreate formatting (I'm keeping notes for my colleagues on functions that I'm using so they can also understand it).
In the current lesson, the list of instructions I'm working with is spreading over multiple "cards." I've mostly been able to make this work, but the current card has a graphic tie-in that I'm having some difficulty puzzling out.
What I'm trying to do on this card:
4. Instruction item 4
5. Instruction item 5
5.1 Sub-instruction 1
5.2 Sub-instruction 2
5.3 Sub-instruction 3
Graphic referenced by above
6. Instruction item 6
etc.
The current code sections that I'm finding are not quite getting to that result, though.
I've been researching online (including here), and I'm finding information that helps me get to the X.Y formatting and information that gets me the changing start point, but not ways to use both in context of a multi-level list.
I can almost make this work using the below code snippet:
<style>
OL { counter-reset: item 3 }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
</style>
<ol>
<li><strong>Instruction 4</strong></li>
<li><strong>Instruction 5:</strong></li><strong>
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</strong></ol>
Instead of:
4. Instruction item 4
5. Instruction item 5
5.1 Sub-instruction 1
5.2 Sub-instruction 2
5.3 Sub-instruction 3
the above code section currently gives me:
4 Item 4
5 Item 5
5.4 Sub Item 1
5.5 Sub Item 2
5.6 Sub Item 3
If I substitute "counter-reset: item" for "counter-reset: item 3" I instead get:
1. Instruction item 4
2. Instruction item 5
2.1 Sub-instruction 1
2.2 Sub-instruction 2
2.3 Sub-instruction 3
Push comes to shove I could use separate lines of text and the appropriate line padding to get the desired effect (or try to change the graphics), but ideally I'd like to find a way to get the list to automatically format appropriately so we can use this for future lessons. Any assistance to help with where I'm going wrong would be greatly appreciated.
First of all, you should have your nested ol in a li.
The only allowed children of an ol are li.
Now, let's see what you can do with a second counter:
ol { counter-reset: item 3}
li { display: block }
ol > li:before {
content: counters(item, "") " ";
counter-increment: item
}
ol ol {
counter-reset: tata 0; /* Second counter */
}
ol ol li:before {
content: counters(item, "") "." counters(tata, "") " ";
counter-increment: tata;
}
<ol>
<li><strong>Instruction 1</strong></li>
<li>
<strong>Instruction 2:</strong>
<strong>
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</strong>
</li>
</ol>
Counters are confusing pains, but I've sorted it out for you:
CSS
body {
counter-reset: section;
}
ol {
counter-reset: section +3;
list-style-type: none;
}
li.heading::before {
counter-increment: section;
content: counter(section) '. ';
}
ol.sub-heading-wrapper {
counter-reset: subheading;
}
li.sub-heading::before {
counter-increment: subheading;
content: counter(section) "." counter(subheading) " ";
}
HTML
<ol>
<li class="heading"><strong>Instruction 4</strong></li>
<li class="heading"><strong>Instruction 5:</strong>
<ol class="sub-heading-wrapper">
<li class="sub-heading">Sub-item 1</li>
<li class="sub-heading">Sub-item 2</li>
<li class="sub-heading">Sub-item 3</li>
</ol>
</li>
<li class="heading"><strong>Instruction 6:</strong>
<ol class="sub-heading-wrapper">
<li class="sub-heading">Sub-item 1</li>
<li class="sub-heading">Sub-item 2</li>
<li class="sub-heading">Sub-item 3</li>
</ol>
</li>
</ol>
Basically, I create two counters. One is reset at the top of the HTML page. The second one resets for every "sub-heading-wrapper" class. Then they just increment and get squished together appropriately.
I am creating a new moodle block and I want to edit the code of CSS for this block. Currently there are images that I want to make inline but moodle makes these images in ul and li by default that take the full width "display: block". I can't give any class to these li and I can't select the li because moodle create the li tags for the titles and everything in the block, so if I edit the li it will be for every element like h1 and so on not only for imgs, can I give a class for it?
<ul class="unlist">
<li class="r0"><div class="column c1"><h3><div class="text_to_html">User grade</div></h3></div></li>
<li class="r1"><div class="column c1">first grade middle school </div></li>
<li class="r0"><div class="column c1"><h3><div class="text_to_html">user type</div></h3></div></li>
<li class="r1"><div class="column c1"> Student</div></li>
<li class="r0"><div class="column c1"><h3><div class="text_to_html">General Certificates</div></h3></div></li>
<li class="r1"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/1900 $10000 Gold Certificate both sides.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/1900%20%2410000%20Gold%20Certificate%20both%20sides.jpg"></a></div></li>
<li class="r0"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/Aamir Javed Certificate.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/Aamir%20Javed%20Certificate.jpg"></a></div></li>
<li class="r1"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/US $20 1905 Gold Certificate.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/US%20%2420%201905%20Gold%20Certificate.jpg"></a></div></li>
If you can use jQuery, you can do something like:
$(document).ready(function() {
$("ul.unlist li div img").css("display", "inline");
});
What does it do:
Wait for the page to completely load
Select all <img> tags inside your <ul> that have the unlist class, that also have a <div> as a parent element, inside a <li> element
So, basically, it selects the <img> in the last 3 rows of the few lines you provided.
That way, you only select the <li> that have a <img> tag in it and not the other <li> with the <h3> tag, for example.
If you can't use jQuery, here is the same code, but in pure JavaScript:
(function() {
document.querySelector("ul.unlist li div img").style.display = "inline";
})();
Edit
By re-reading your question, you want to add a class, so here it is:
jQuery
$("ul.unlist li div img").addClass("your-class");
JavaScript
document.querySelector("ul.unlist li div img").className += " your-class";
Don't forget the space in the beginning of the JavaScript one, otherwise your <img> classes are gonna be like that : cvpicyour-class instead of cvpic your-class
This question already has an answer here:
Continue ordered list numbering automatically
(1 answer)
Closed 4 years ago.
Looking for the following ordered
1a.milk
1b.bread
1c.butter
1d.coffee beans
The following syntax did not satisfy my requirement.
<ol>
<li>milk
<ol type="a">
<li>bread</li>
<li>butter</li>
<li>coffee beans</li>
</ol>
</li>
</ol>
Above syntax show bellow output
1.milk
a.bread
b.butter
c.coffee beans
You can use CSS counters and have 1a-1d for each of the lis (the 1 is from the ol counter and the a-d is from the li counter. CSS counters can be configured to show a number of different styles and types.
EDIT - as #Tomalak indicates in the comments - I have amended this to reset the li-index in the ol styles - and added a second list to demonstrate the result. The first list is showing 1a - 1d and the second list is showing 2a - 2d.
I also changed it to an ol structure to closer match the OP's request, but the concept works for any type of list (and any type of repeating element).
.list-wrapper {
counter-reset: ol-index;
counter-reset: li-index;
}
ol {
list-style: none;
counter-increment: ol-index;
counter-reset: li-index;
}
ol li {
counter-increment: li-index;
}
ol li::before {
content: counter(ol-index) counter(li-index, lower-alpha) ". ";
}
<div class="list-wrapper">
<ol>
<li>milk</li>
<li>bread</li>
<li>butter</li>
<li>coffee beans</li>
</ol>
<ol>
<li>paper</li>
<li>flour</li>
<li>jam</li>
<li>biscuits</li>
</ol>
</div>
How can i display custom ordered list ? Is it possible to get below output
Tour 1: Hello
Tour 2: Whats up ?
Tour 3: Bye
Tour 4: Test Tour
You can use CSS counters and content to prepend a word to an increment. Demo
HTML
<ol>
<li>Hello</li>
<li>Whats Up</li>
<li>Bye</li>
<li>How Are You</li>
</ol>
CSS
ol {
counter-reset: tour;
}
li:before {
counter-increment: tour;
content: "Tour " counter(tour) ": ";
}
Output
Tour 1: Hello
Tour 2: Whats up ?
Tour 3: Bye
Tour 4: Test Tour
Explanation
Using counter-reset sets the <ol> counter to your counter tour
Every <li> increments tour with counter-increment
Set the content of the pseudo element :before to "Tour " + counter value + ": "
You can use a pseudo element to do this effect, but I'm not sure as far as the colon goes:
<ol class="tour">
<li>First thing's first</li>
<li>Second's the best</li>
<li>Why not third?, Because I though it was the best.</li>
<li>How about fourth?</li>
</ol>
And the CSS (margins would need to be tweaked to your liking - although you could probably use positioning to achieve the same thing):
ol.tour li:before {
content:"Tour";
margin-left:-60px;
margin-right:30px;
}
ol.tour{
margin-left:40px;
}
Example Fiddle: http://jsfiddle.net/n4s8fo2q/