<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
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>
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>
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
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
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}