I have an html like this
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<ul>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
</ul>
<li>1.4</li>
<li>1.5</li>
<ul>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
<li>1.6</li>
<li>1.7</li>
<li>1.8</li>
</ul>
How can I target only the last and first 3 child? In my html I want only 1.1, 1.2, 1.3, 1.6, 1.7 and 1.8 will be target.
This is what I tried but it target also the li inside of ul's children ul
First, you need a way to identify the ul you are interested in. You can add a class or id to the outermost ul so that your selectors don't target other ul's. (If editing the HTML is not an option, you can use the parent element in your selector, and select only direct descendant ul's.)
Next, use the right selectors, to get the first and last 3 children.
To select first 3 children:
ul.top > li:nth-child(-n+3)
To select last 3 children:
ul.top > li:nth-last-child(-n+3)
See it here.
I had to target everything but the last and first 3 children.
ul>*:not(:nth-child(-n+3)):not(:nth-last-child(-n+3)) {
background-color: orange;
}
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<ul>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
</ul>
<li>1.4</li>
<li>1.5</li>
<ul>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
<li>1.6</li>
<li>1.7</li>
<li>1.8</li>
</ul>
Related
This is my code:
<ul>
<li>
<ul>
... (There can be many other nested elements ul li)
<li>a</li>
<li>b</li>
...
</ul>
</li>
</ul>
How to using CSS to select last level hierarchy elements li (the result is that the li elements contain a and b) without knowing level hierarchy
CSS is possible if available:
ul * li:last-hierarchy
Result the selected elements should be:
<li>a</li>
<li>b</li>
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 am working on this demo. How can I apply different style to my nested list (>Nested 1. and >Nested 2) rather than its parent list?
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul>
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
You can use li li a to select those elements. For example:
li li a {
color:red;
}
jsFiddle example
I would achieve this through classes added to the <ul> elements, then use the appropriate css selector to apply the style.
Add the class to the <ul> tag you want to style.
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul class="styledList">
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
Then, in the css sheet, apply styling to that class name, or just to the <li> elements within that list, whatever is appropriate.
Apply to <ul> and all decendants
.styledList {
// css style
}
Apply only to <li> inside the <ul>
.styledList li {
// css style
}
The . in the selector is used to specify that the style is applied to the elements with that class, or you can use the # selector to specify an ID that you want the style applied to, such as
<div id="styledDiv">Hello</div>
css
#styledDiv {
border: 1px solid black;
}
If you want to learn more about CSS selectors, you can check out the W3 article
http://www.w3.org/TR/CSS2/selector.html
and here is the class selectors in particular
http://www.w3.org/TR/CSS2/selector.html#class-html
<ul>
<li></li>
<li></li>
<li class="has-child will-be-ignored">
<ul>
<li></li>
<li></li>
<li class="has-child will-be-selected">
<ul>
<li></li>
<li></li>
<li class="has-child will-be-selected">
<ul>
...
</ul>
</li>
</ul>
</li>
<ul>
</li>
<ul>
Is there any way in CSS to select elements with class has-child will-be-selected. These elements could be continued any number of level.
UPDATE:
will-be-ignored and will-be-selected classes are just to highlight them to be selected. These classes don't actually exist.
Sure, step to the first level and then target the ones underneath that:
ul > li.has-child li.has-child
Of course, depending on your structure, you may have to anchor that first-level ul to its own parent to make sure that its child li isn't inadvertently matching the selector, e.g. if your ul happens to be in another list.
You can use:
ul ul > li.has-child.will-be-selected
The simplest and most straight-forward way would be this selector...
li.has-child.will-be-selected
that selects all elements that has both has-child class and will-be-selected class as per your question description. However, if you want to skip the first level use...
ul ul li.has-child.will-be-selected
as per the title of your question