I know how to format Ordered List (OL) items but I don’t know how to style a list item with extra CSS design as shown in the image below.
I don’t have a sample code for this since I have no idea where to start. Would like to have it under div “content” and LI class “featured” I will appreciate your help. Thank you.
Did you mean something like this?
3 Likes
.[quote=“PaulOB, post:2, topic:291167, full:true”]
Did you mean something like this?
[/quote]
Excellent. You quickly get the idea. This is exactly what I wanted. Thanks again @PaulOB
1 Like
@PaulOB The above code works well if the ordered list has no other inner UL or OL list items
for example this code: You can run it on codepen without altering the above CSS to see the difference.
<h1>Ordered list with Counters</h1>
<div class="content">
<ol class="featured">
<li>
<h2>This is the Heading of this</h2></li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc magna, tincidunt ac purus a, aliquam iaculis sapien. Pellentesque non laoreet mi. Curabitur at dui ultricies, dapibus elit ac, Cras neque diam, mollis sed libero id, fringilla tempus lacus.</p>
I’ll focus on the following points for modernizing your front desk with InstaCheckin visitors’ management system.
<ul>
<li>Office productivity</li>
<li>Visitor identification, privacy, and office security</li>
<li>Storage, speed, accuracy and reporting and digital visitor log</li>
<li>Brand image</li>
<li>Real-time visitor tracking and monitoring</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc magna, tincidunt ac purus a, aliquam iaculis sapien. Pellentesque non laoreet mi.</p>
<li>
<h2>This is the Heading of this</h2> </li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc magna, tincidunt ac purus a, aliquam iaculis sapien. Pellentesque non laoreet mi. Curabitur at dui ultricies, dapibus elit ac, volutpat nibh. Nullam ullamcorper ipsum nunc, vel molestie enim posuere sit amet. Phasellus eu convallis purus. Donec sodales eleifend magna. Maecenas vestibulum, dui et blandit dignissim, nulla purus maximus nunc, ut varius est libero in nisl. Curabitur nec ipsum at mi scelerisque vehicula ut vitae enim. Nulla facilisi. Cras nunc magna, ornare eu purus faucibus, dictum tempor sapien. Nam tempus erat eget tellus lobortis tempus. Cras neque diam, mollis sed libero id, fringilla tempus lacus.</p>
<li>
<h2>This is the Heading of this</h2></li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc magna, tincidunt ac purus a, aliquam iaculis sapien. Pellentesque non laoreet mi. Curabitur at dui ultricies, dapibus elit ac, volutpat nibh. Nullam ullamcorper ipsum nunc, vel molestie enim posuere sit amet. Phasellus eu convallis purus. Donec sodales eleifend magna. Maecenas vestibulum, dui et blandit dignissim, nulla purus maximus nunc, ut varius est libero in nisl. Curabitur nec ipsum at mi scelerisque vehicula ut vitae enim. Nulla facilisi. Cras nunc magna, ornare eu purus faucibus, dictum tempor sapien. Nam tempus erat eget tellus lobortis tempus. Cras neque diam, mollis sed libero id, fringilla tempus lacus.</p>
</ol>
</div>
That example doesn’t format well. Can you please show me how to create a unique OL for headings alone like the image above that doesn’t affect the other list items within the post?
There is this backlinko example of such a post with unique OL heading :
You will need a valid list structure first of all.
You can’t mix and match different elements within a list. Direct children of the list element mist be <li>s. Any <p>s or other elements must be nested within the <li>s or be outside of the list.
That means from the code above I cant have other li’s inside the ol class=“featured”? in order to conform to the earlier code by @PaulOB? as that’s what I want but I’ll also like to add li’s inside of it without inheriting the style from HTML heading tags.
No, it means that the code above is invalid. The ol can and should contain a number of li.
But you cannot have elements like p or h2 as a direct child of the ol, you can only have li as a direct child, but that li can contain other elements.
Putting the code through the validator I linked will highlight such problems for you so you will know when you have it right.
1 Like
Once you’ve fixed the html you can limit the counters to immediate children so that they don’t affect nested lists using the child selector.
e.g.
.featured > li:before {etc..}
.featured > li {etc...}
Here’s an example with an unstyled ul inside the ol.
2 Likes
Thank you @PaulOB and @SamA74. I did figure out with the help of the code from PaulOB from his code pen link codepen.io/paulobrien/pen/bvNxzr
Here is what I achieve and it suits my earlier question (Paste the CSS code below to PaulOB #8 reply). The HTML code remains unchanged as depicted from the given code pen link.
h1{
text-align: center;
}
.content {
counter-reset: section;
max-width:980px;
margin:auto;
}
ol.featured {
margin:0;
padding:0;
list-style:none;
}
.featured h2 {
font-weight: 700;
font-size: 28px !important;
color: #ffffff !important;
line-height: 1.2em !important;
text-transform: capitalize;
text-align: center;
background: #51c18b;
margin-top: -5px !important;
padding-top: 25px !important;
padding-bottom: 15px !important;
border-radius: 3px;
}
.featured >li {
border: 2px solid #f2f2f259;
background: #fefefe;
position: relative;
margin: 50px 0;
padding: 5px 15px 0px;
}
.featured > li:before {
counter-increment: section;
content: counter(section);
font-size: 30px;
border-radius: 50%;
background: #fdfdfc;
width: 60px;
height: 60px;
line-height: 60px;
position: absolute;
left: 0;
right: 0;
top: -30px;
margin: auto;
color: #95c41f;
font-weight: 700 !important;
text-align: center;
border: 2px solid #95c41f;
}
Thank you all for your time and support.
Hi,
Glad you managed to work something out 
A few more pointers before you go:
Never use !important unless you know the reason for it. You have more !importants in that little snippet than I would use in ten whole sites!
Simple specificity should never be countered with !important because it makes maintenance so much harder in the long run and you end up with important on everything. Seeing many importants like that is the first sign of ‘code smells’.
None of the importants are needed in the codepen but I guess you are trying to add this code to an existing site so all you need todo is make your rules more specific without using !important. Use the developer toolbar to see where original styles cascade from and then use the same weight in your styles to win out.
In the following section you have added padding top and then a negative margin at the same time. You could have just added less padding-top!
margin-top: -5px;
padding-top: 25px;
why not: padding-top:20px ?
I also note that you do not take care of the default top and bottom margins on elements like heading and p tags so that will differ between browsers unless you have already taken care of those in your reset or default styles (if this code is being added to another page).
3 Likes
I have never taught of your points @PaulOB. I have so much !important on my localhost WP site. I usually use the “customized stylesheet” without revisiting the original theme CSS. I will revisit and change all the code to match the customized CSS code before being live online.
Thank you for your extra advice.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.