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.
Related
In my code, there are list items and they all have a category. Each categories are sequentially added for each list items.
Here is my HTML:
HTML
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
CSS
ul li{display:none}
ul li.A:nth-of-type(1){display:block}
ul li.B:nth-of-type(1){display:block}
ul li.C:nth-of-type(1){display:block}
I am trying to display only the first element of each category. I am expecting below output:
A1
B1
C1
Here is my fiddle - https://jsfiddle.net/9pdby6st/200/
I observed that nth-of-type works only when the very first element is that category.
Here are the limitations:
Cannot change html structure
Cannot use javascript
Can use SCSS. Any advice?
You could use the adjacent sibling selector + for the elements that end with a class name and start the next tag with another class name.
Eg: .A + .B {display: block}
In the above case, only one instance is possible and the first element with the classname B displays and the other siblings are hidden.
You could use it to create many combos such as .B + .C {display: block} and so on.
JSFiddle link
ul li {
display: none
}
ul li.A:first-child {
display: block
}
ul li.A+.B {
display: block
}
ul li.B+.C {
display: block
}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
As seen here: https://stackoverflow.com/a/8539107/1423096
You can set the property for all the items and then undo it for the siblings that come after the first one.
ul li {
color: red
}
ul li.A:nth-of-type(1) {
color: blue
}
ul>li.B {
color: green
}
ul>li.B~li.B {
color: red
}
ul>li.C {
color: yellow
}
ul>li.C~li.C {
color: red
}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
Try this (inspired by alo Malbarez answer)
ul li{display:block}
ul>li.A~li.A {display: none}
ul>li.B~li.B {display: none}
ul>li.C~li.C {display: none}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
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>
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 {
I have this code :
<ul class="a">
<li class="b">hhhh</li>
<ul class="c">
<li class="d">Home</li>
<li class="d">hsos</li>
<ul class="c">
<li class="b">Home</li>
<li class="b">Home</li>
</ul>
When i display it the second li has a margin by default. What i want is that all that list to have the same margin.
There is a default padding-right in ul elements that you can remove using this CSS class:
ul {
padding-left:0;
}
Example
I know how to get the first anchor of my li but the thing is, my code has 2 sub-menus of the same class and I want only the first ul to be affected.
<div id="navigation">
<ul>
<li>
Main menu
<ul class="sub-menu">
<li>Sub menu
<ul class="sub-menu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I can't find an anchor in your code, but I'm assuming that each <li> would contain one? In that case this is how you would select it:
#navigation > ul > li:first-child a{color:#FFF}
As it stands, the first-child isn't really needed - this would only come into play if you were to add more <li>s directly after the one you are aiming at.
JSFiddle
After your edit
You changed the code, so I guess I should update my answer. To target the 'main menu' anchor:
#navigation > ul > li > a{color:#F00}
JSFiddle
To target the first sub-menu anchor:
#navigation > ul > li > ul > li > a{color:#F00}
JSFiddle
If you dont want to use the :first-child you can use this:
Updated code and demo after the question was updated.
#navigation > ul > li > ul > li > a {color:red;}
This will only select the first <li><a> of the list, check the demo.
DEMO
Assuming you mean an anchor inside every li, something like that:
#navigation .sub-menu:first-child li:first-child a {
background-color: yellow;
}
<div id="navigation">
<ul class="sub-menu">
<li> <a href="#">1<a/>
</li>
<li> <a href="#">1.1<a/>
</li>
<ul class="sub-menu">
<li><a href="#">2<a/></li>
<li><a href="#">3<a/></li>
<li><a href="#">4<a/></li>
</ul>
</ul>
</div>
I intentionally added another li for the 1st ul - to make sure it works.
See JSFiddle example:
http://jsfiddle.net/rKynY/4/