How can I select only the first parents ul (here with the class selectMe), with or without a <div> between the <nav> and them ?
I need to do it without any class in the ul.
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
.
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
How about using a different selectors for every case, and combining the both?
Case 1: Select only the first parents <ul> without <div>:
nav > ul
Note that > mean the child in the immidiate next level below.
Case 2: Select only the first parents <ul> with <div>:
nav > div > ul
Combining both cases: You can use both of these combined by adding a ,:
nav > ul, nav > div > ul
Without the class you'll need two selectors:
nav > ul,
nav > div > ul {
...
}
> here is the Child Combinator selector, which selects the direct children. This means the inner ul contained within your top-level ul will not get selected.
Example 1 (nav only)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
Example 2 (nav and div)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
In fact I have to select all the ul in top level and not ul in ul
This is exactly what this does. In both of the above examples only the outer ul element has a border:
If both ul elements were selected, both would have the border and it would instead look like this:
Related
I created a list (li) and I want to add a specific class to that list
<ul class="main">
<li></li>
<li>
<span class="ext"></span>
<ul>
<li>
<span class="ext"></span>
</li>
</ul>
<li>
</ul>
I want to add a class to only that first ul > second li > first span class but for some reasons it is also adding it to that span class under the second ul.
This is the code I'm using to add the class
$('ul.main li:nth-child(2) .ext').addClass('another-ext')
Snippet:
$('ul.main li:nth-child(2) .ext').addClass('another-ext')
.another-ext {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li></li>
<li>
<span class="ext"></span>
<ul>
<li>
<span class="ext">hello</span>
</li>
</ul>
<li>
</ul>
Use children selector. It should work.
$('ul.main > li:nth-child(2) > .ext').addClass('another-ext')
.another-ext {color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>A</li>
<li>
<span class="ext">B</span>
<ul>
<li>
<span class="ext">C</span>
</li>
</ul>
<li>D
</ul>
I am currently trying to change the properties of another object in css but am not sure if I am doing this right. Any help would be appreciated.
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover ~ ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
~ is a "general sibling selector", so it will match any element that is a sibling that comes after the element on the left side of the selector.
With your markup, you either just want to remove ~ to target any ul.drop-menu that is a child of li, or if you want the direct descendent, change it to a >. I'm assuming you want the latter, in case you nest multiple .drop-menu's in li's. I added another nested menu and changed your selector a little to demonstrate that.
ul.drop-menu {
opacity: 0.1;
}
nav > ul li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
You have to use > instead of ~. Please check this:
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>
Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>
you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.
The li element with "portfolio" in the text is the element I would like to hover over to drop down. For some reason, nothing drops down when I hover over "Portfolio"...
Here is the code
#navmenu ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navmenu .hoverme:hover ul {
visibility: visible;
}
<div id="wrapper">
<div id="navmenu">
<div class="hoverme">Portfolio
<ul>
<li>Reviews
</li>
<li>Appendix
</li>
<li>Team
</li>
<li>Company
</li>
<li>Individual
</li>
<li>Cert of Att
</li>
<li>Skills Prof
</li>
<li>Csmr Visits
</li>
<li>Income
</li>
<li>Roles
</li>
</ul>
</div>
</div>
</div>
Do you know why? Any help greatly appreciated.
you need to close the li with portfolio after the child ul, otherwise your HTML markup is invalid, because you can't have ul as direct child of an ul
From Specs
Content model:
Zero or more li and script-supporting elements.
#navmenu ul ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navmenu ul li:hover ul {
visibility: visible;
}
<div id="wrapper">
<div id="navmenu">
<ul>
<li>Portfolio
<ul>
<li>Reviews
</li>
<li>Appendix
</li>
<li>Team
</li>
<li>Company
</li>
<li>Individual
</li>
<li>Cert of Att
</li>
<li>Skills Prof
</li>
<li>Csmr Visits
</li>
<li>Income
</li>
<li>Roles
</li>
</ul>
</li>
</ul>
</div>
</div>
I have a div like below i need to align the 3 ul which is inside the li in single row using css.
<div id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount"></li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount"></li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"></li>
</ul>
</li>
</div>
As like this
try to this code
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
Or this like
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
#printEmilCountDiv ul li{display:inline-block;vertical-align:top;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
You may remove the first li and replace it with div. Then apply a styling like;
ul{
margin-top: 0;
margin-bottom: 0;
}
Which trims the margin. Here is a demo
And you may add float: left; to either ul or li to align them in a row, like this