CSS lists and preudoclasses. Only CSS solution required [duplicate] - html

This question already has answers here:
How do I select the "last child" with a specific class name in CSS? [duplicate]
(6 answers)
Closed 8 years ago.
How have can I set styles for the last list element of the nested list. I want these styles to be applied only to elements with the class "match".
Here is the code example:
HTML:
<ul>
<li>
<ul>
<li class="match">x1 match</li>
<li class="match">y1 match</li>
<li>z1</li>
</ul>
</li>
<li>
<ul>
<li>x2 match</li>
<li class="match">y2 match</li>
<li>z2</li>
</ul>
</li>
<li>
<ul>
<li class="match">x3 match</li>
<li class="match">y3 match</li>
<li class="match">y3 match</li>
</ul>
</li>
</ul>
CSS:
ul li ul li:last-of-type {
color: red;
}
http://jsfiddle.net/RYz6e/1/
To be specific in this example I want next items to be selected:
y1 match
y2 match
y3 match
Thank you


Try this:
ul li ul .match:nth-of-type(even)
{
color: red;
}
Fiddle
This won't work if more elements come.


try to like below using css3
ul li:last-child
{
color: red;
}


Or you could use:
ul .match {
color: red;
}
For a shorter notation.

Related

Target first `li` having specific class inside `ul` with css only

Is it possible to target first li having specific class inside ul? for example :
<ul>
<li class="a"></li> <!-- I want to target this li -->
<li class="a"></li>
<li class="a"></li>
<li class="b"></li> <!-- and this li -->
<li class="b"></li>
<li class="b"></li>
</ul>
Any possibility?

Use the :first-child pseudo-class and the adjacent sibling selector +.
.a:first-child, /* Select the first child element */
.a + .b { /* Select the first element with 'b' class */
background-color: dodgerblue;
}
<ul>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>

try selector :nth-child() and :first-child
ul li:first-child {
//some css
}
and
ul li:nth-child(4) {
//some css
}

You can't select with class as parameter for first-child. Instead use ~ operator to select the reverse. i.e apply styles for rest except first child.
li.a, li.b{
color: green; /*your styles for first elemenets*/
}
li.a ~ .a { /*differentiate rest of them from first*/
color: black;
}
li.b ~ .b {
color: black;
}
<ul>
<li class="a">1</li>
<!-- I want to target this li -->
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<!-- and this li -->
<li class="b">5</li>
<li class="b">6</li>
</ul>

Generally, you can only target an element, a value of a named attribute in it, or the name of an attribute in the element. So, I would say the answer might be...no? (limited to my own knowledge)
That being said..
Would it be possible to insert an empty <li> before each item you want to target?
If so, you can easily select those items like so:
ul li {
color: red
}
li:empty {
display: none
}
li:empty + li {
color: green
}
<ul>
<li></li>
<li class="a">1</li> <!-- I want to target this li -->
<li class="a">2</li>
<li class="a">3</li>
<li></li>
<li class="b">4</li> <!-- I want to target this li -->
<li class="b">5</li>
<li class="b">6</li>
</ul>

CSS :not() with [attribute*=value] selector not works properly

I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/

The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {

Can you use multiple child selectors in one css element?

SO I am trying to create a hidden drop down menu and I want only the outer li to have specific css elements. Want I want to know if you can use multiple child selectors, > , so I can apply to the links within those li 's and not have applied to the links in the smaller menus
For example:
<ul class="top">
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
and a css element would be:
ul.top > li > a {
color: red;
}
whereas I would want the a in ul.second to, a random example, have color: blue

If you want to target the "outer" links, you should do just as you wrote:
ul.top > li > a {
color: red;
}
If you want to target the "inner" links, just use any of the following selectors:
ul.top ul a {
color: green;
}
or
ul.second > li > a {
color: green;
}

CSS: hide first-list item of ul with second depth

I have the following structure for a navigation …
<ul role="navigation">
<li class="page_item page-item-2">
Sections
<ul class="children">
<li class="page_item">One</li>
<li class="page_item">Two</li>
<li class="page_item">Three</li>
</ul>
</li>
<li class="page_item page-item-6">
About
<ul class="children">
<li class="page_item">Contact</li>
<li class="page_item">Members</li>
<li class="page_item">Become Member</li>
<li class="page_item">Whatever</li>
</ul>
</li>
</ul>
How can I hide the first appearance of each <a> inside the outer list elements?
In my case I'm talking about Sections and About
I thought
ul li > a { display:none; }
or
ul > li > a { display:none; }
should be doing the trick, but it hides everything.

That's because all the as are children of lis which are children of uls.
Your top-level ul has a role="navigation" so you can select that:
ul[role="navigation"] > li > a { display:none; }

I think the easiest and the most efficient way would be to add class like .hidden {display: none;}, but you could also add a class to the outer ul, and then:
.ul-outer-class > li > a { display: none; }
It's also more efficient than using attribute selectors.

Applying CSS styling to only the first <li> in the root of a nested list

i want to apply the CSS only first li but :first-child apply to all first child of every ul
here is my CODE
#menu-navigation li:first-child{
color:red;
}​
When applied to this HTML:
<ul class="nav" id="menu-navigation">
<li>Home</li>
<li>About Us
<ul>
<li>Our Team</li>
</ul>
</li>
</ul>​
...both "Home" and "Our Team" turn red.

use the child selector:
#menu-navigation>li:first-child{
color:red;
}​
For example: http://jsfiddle.net/w47LD/3/

Wouldn't it be easier to just use an id/class?
<li class="red"> Our Team </li>
.red
{
color: red;
}
Alternatively you could use an ID...
<li id="red"> Our Team </li>
#red
{
color: red;
}