This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
I would like to apply styling to list items in ordered list (specifically to the ::after or ::before), based on the classes of the <li>. The code for these lists looks like the following:
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
The lists are generated automatically, and the position of the first class2 item may vary inside the list (it can even be absent in some case, leaving only class1 items in the list).
I would like to add something in the ::before of the first item of each class (like a specific header for each type of item in my list). Ending up with something like this:
Example of expected result
Anyone could help me with the CSS selector to use for this? I tried several things with + or ~ but nothing works seems for now...
Thanks!
David
There is no :first-of-class selector available, but you can use the general sibling combinator to remove the pseudo element for all elements with the same class, that are following the first one:
.class1::before { content:"some header for class 1"; display:block; }
.class2::before { content:"some header for class 2"; display:block; }
.class1 ~ .class1::before, .class2 ~ .class2::before { content: none; }
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
You can use a section tag to define a header for your list.
<section>
<h3>Reference Document</h3>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
Related
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Using a CMS for a webshop.
The platform is currently generateing a list for a menu like this:
<ul class="menu">
<li class="item*">
Category 1
<ul class="level 1">
<li class="item*">Item 1</li>
<li class="item*">Item 2</li>
<li class="item*">Item 3</li>
</ul>
</li>
<li class="item*">Category 2</li>
<li class="item*">Category 3</li>
</ul>
I want to add bullets to this list and was thinking of using li:before and have a content:url(image.png).
The problem is that I want a diffrent image for the "Categorys" and the "Items"
How can I slove this?
Tried ul.menu li:before but that selcets all li in the tree.
The classes that is generated on the li's I dont have mutch control over. The classes generated on the li´s is like "item 1" "item 2" and so on
Is this possible with css or do I need to use jquery?
You are using the space selector to assign your bullet image, which selects all descendants and therefore will add a bullet image to deeper levels too.
Instead, use the greater-than selector to select only immediate children. Like this, you only select one level at a time.
ul.menu>li:before {
/* 1st level */
}
ul.menu>li>ul>li:before {
/* 2nd level */
}
ul.menu>li>ul>li>ul>li ...
I have three <li> tags in an <ul id="accordion">. I now want to select the various items via jQuery.
To select the first <li> item, we can use $("#accordion li:first").
To select the last <li> item, $("#accordion li:last") works
How can I select the middle <li> element through a jQuery selector? There is no :middle pseudo-class that I could use here.
You can combine two ":not" selectors so that you get all of the 'not first, and not last' elements like so:
HTML
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Javascript
$('li:not(:first-child):not(:last-child)').css('color', 'red');
Also, check the JsFiddle
There is no :middle selector, and this makes sense – what element would get matched when we have 4 items?
However, you can access elements by their index. Using CSS Level 3 selectors, you can use the :nth-child(…) pseudo-class:
#accordion li:nth-child(2)
The :nth-child pseudoclass can also select repeating patterns of elements, such as all even or odd childs.
jQuery additionally offers the nonstandard :eq(…) pseudoclass for indexing, which you should probably use in this case:
$("#accordion li:eq(1)") // zero-based indexing
Further reading:
:nth-child CSS documentation on MDN
:nth-child jQuery documentation
:eq jQuery documentation
In this mode you can count number of elements.
for example you have this :
<ul id="someId">
<li>t1</li>
<li>t2</li>
<li>t1</li>
</ul>
the you can use length to count lis
var ln =$("#someId li").length;
after that find middle of length by this code
ln = ln / 2;
then use eq function of jquery to select middle Item like this
$("#someId li:eq("+ln+")").css("border","1px solid red");
But don't forget indexing by using eq starts from 0 .
I hope my answer help you :)
Another way to select second element is to use adjacent sibling selector +:
$("#accordion li:first + li")
Here is a demo.
$("#accordion li:first + li").addClass('selected');
.selected {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
And here is also generic solution for arbitrary number of li elements (not only 3):
$('#accordion li ~ li:not(:last)').addClass('selected');
.selected {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I have some nested <ul>s and I want them to be the same height: the height of the tallest one. I cannot specify the height of any <ul> since it depends on the amount of <li>s in it.
I figure I could solve this pretty easy using some js, but I am curious if this could be fixed using CSS.
I created a simple fiddle to demo: http://jsfiddle.net/vnFLK/2/
<nav>
<ul>
<li>Li 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Li 2
<ul class="green">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
</nav>
The <ul> with green borders is supposed to determine the height of the root <ul> and then I want the sibling <ul> to get the same height. The green <ul> is pushed 200% to the right just to be clearer.
This is a simplified representation of a navigation where a <ul> is a submenu that is going to be pulled over the parent one. Therefore they need to be the same height to prevent the parent menu being shown.
/Erik
Absolutely-positioned elements are no longer part of the document flow - they act as a new context. Therefore the parent element has no idea what size the child element is and cannot adjust its own size to match it.
There is no CSS solution for this. You need to use JavaScript.
I have the following code:
<ul id="myList">
<li class="li1">Example 1</li>
<li class="li2">Example 2</li>
<li class="li3">Example 3</li>
<li class="li4">Example 4</li>
</ul>
Is there any way i can transform the list to:
<ul class="myList">
<li class="li1"><div class="container">Example 1</div></li>
<li class="li2"><div class="container">Example 2</div></li>
<li class="li3"><div class="container">Example 3</div></li>
<li class="li4"><div class="container">xample 4</div></li>
</ul>
using css only.
without using javascript
CSS cannot add elements, that really isn't its purpose.
That being said, you can achieve a similar effect by making the items display: block, like this:
#myList > li { display: block; }
No. CSS is designed to instruct the browser on how elements look and are positioned. It isn't capable of editing the live HTML.