Good day, im trying to style an ol list number using tailwindcss and cant seem to do it, i have research through google with no luck. thank you for your help.
the framework is different from vanilla css, i cant seem to find same syntax with tailwindcss as it is on vanilla css
To style an ordered list in tailwind, you will need to apply some list utilities to the ol element and use the marker: state on the items you would like to style.
First, the numbers won't be visible if you create an ordered list. To display the numbers, we need to apply those two utilities to the ol container:
list-decimal - Set the style of the list to numbers. Docs
list-inside - Set the number's position inside the ol element. Docs
<ol class="list-decimal list-inside">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
This way, we get a regular ordered list of items without any styling:
If you want to style a specific li element, use the marker: state. You can use the marker: state either on a specific li element or the ol element to apply styling to all the items in the list.
You can read more about the marker: state in the docs.
In the below example, we set the text's color of the ol elements to blue by applying marker:text-blue-700. Then, we set the text of the first li element to red using marker:text-red-700. This way, we get the following:
<ol class="list-decimal list-inside marker:text-blue-700">
<li class="marker:text-red-700">One</li>
<li>Two</li>
<li>Three</li>
</ol>
Tailwind-play
Related
I wanted to make a nested sorted list with css counter. However, when I tried to do it with <ul> and <li> tags, I noticed that there were shifts in the <li> tags. How can I edit these shifts from a single center without typing padding-left?
Examples:
Original <ul> <li> tags.
Original ul li
What I want to do:
What I want to do.
The css properties I tried:
position: relative
&
position: absolute
I don't want to write the following for each element all the time: margins or paddings.
ty so much my dear friends...
I am formatting a text in CSS. When I use unnumbered lists with UL, the text inside the LI tags has different format than the rest: smaller font, less separation between lines and so on.
I know I could define the UL tag with the same format values as the default paragraph, but then, if I change the default format in the future for whatever circumstances, the text in the list will be different again.
Is there a way to make sure that the text in an unnumbered list always has the same format as in the normal P element? Thanks!
This is the code in my styles.css:
ul {list-style-position: inside;}
This is the code in my text:
<p>normal text<p>
<ul>
<li>first item of the list</li>
<li>second item of the list</li>
<li>third item of the list</li>
</ul>
This is the result (notice the difference format in the listed text):
So I am basically asking how can I make that listed text automatically look like the rest, without having to specify different values every time I change the default format.
You could manually give all the elements you want the custom formatting a class
e.g:
li{
font-size: 1rem;
}
.unnumbered{
font-size: 2rem !important;}
<li>1: this is numbered.</li>
<li class="unnumbered">this is not numbered.</li>
without being given a code example, this is the best answer I can give, if you add an example to your post, comment on my answer and I will edit it.
By default Bootstrap sets paragraph margins to zero, it also removes the default styles from lists (such as paddings/bullets).
The reason they do this is well explained, pretty clear and understandable.
Use case: we have a section of user-generated content on the page with applied Bootstrap 5 styles; this section contains paragraphs and lists, which we would like to be displayed with the default styles (such as: paragraphs have margins, lists have bullets etc).
Question: is there any way to do that without assigning classes to each paragraph / list and without redefining those styles again back to original?
Best solution would be some class applied to wrapper, which applies the default styles to all the children elements (i.e. 'resets the reset'), but reading Bootstrap docs did not help.
Thanks.
You may be able to wrap the content in a single element and use revert to undo Bootstrap's reset.
.normal-typography p,
.normal-typography h2,
.normal-typography ul {
margin: revert;
padding: revert;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="normal-typography">
<h2>Headings and paragraphs</h2>
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
<p>The <code><hr></code> element has been simplified. Similar to browser defaults, <code><hr></code>s are styled via <code>border-top</code>, have a default <code>opacity: .25</code>, and automatically inherit their <code>border-color</code> via <code>color</code>, including when <code>color</code> is set via the parent. They can be modified with text, border, and opacity utilities.</p>
</div>
I have some html which looks something like this
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I want to apply a style on any specific <li> on hover AND apply a different style to the previous and next <li> elements (the one next to the hovered one).
If possible I want to do this with pure css (no JS).
So to be clear there are 3 different states and 3 different sets of styles a <li> could have
the element is hovered over.
the element is not hovered over but the element before or after it is hovered over.
the element is not hovered over and the elements before or after it are not hovered over.
I know that the :hover psudo selector can be used to apply a style to the hovered element - no problem
I know that the next element can be selected with :hover + li - no problem
Applying a style to the previous element is however a problem.
I know there is no previous sibling selector, is this still the case?
I have looked at another stack overflow post which talks about applying a style directly to the previous sibling and then using two adjasent sibling selectors to apply styles to the 2nd and 3rd elements. I cant do that in this case because the hover has to be on the 2nd element.
I have considered using [attribute] selectors combined with attr()
my plan would be to give each li a data attribute and a unique specific number, ie <li data="1">
on hover the attr() feature would be used to read the previous elements data attribute and then pass that to the [attribute] selector.
it might look something like this
li:hover [data-number-type=attr(data-number-type)]
<ul>
<li data-number-type="1">Owl</li>
<li data-number-type="2">Owl</li>
<li data-number-type="3">Owl</li>
<li data-number-type="4">Owl</li>
<ui/>
That snippet of code does not work.
but is there any way to get something like that working?
Is there any other css only way that i have not considered?
Is there any css way to bubble up <li> elements with some class on top of list. I guess I have come across some way to do this in the past but cant remember how to do this exactly.
Please note I dont need to rearrange in markup. Just make the elements with certain class appear as if on top of other elements without that class.
Can anyone tell if there is some way to do this?
With pure CSS, you can move an element to the top of the list using absolute positioning, though it would not actually be at the top of the list as far as the markup is concerned. What you want to do can be achieved with javascript however. Using jQuery, you would want to do something along these lines:
HTML:
<ul id="myList">
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li class="top">First</li>
<li>Fifth</li>
</ul>
Javascript:
$(document).ready(function () {
var list = $('#myList');
list.children('li.top').remove().prependTo(list);
});
Working example: http://jsfiddle.net/tMWJs/
Edit:
To do this with pure CSS, use absolute positioning. Here is an example of the css you would need:
ul#myList {position:relative; margin-top:40px;}
ul#myList li {line-height:20px;}
li.top {position:absolute; top:-20px;}
If you have multiple elements to move, this approach would need tinkering to position each element seperately, and is probably not suitable.
Working example: http://jsfiddle.net/sp73f/