So I am trying to select the 6th child of the Unordered list and it just can't seem to select the item. Is it because the LI's have an anchor as a child?
.nav-links ul:nth-child(6) {
margin-left: auto;
}
<ul>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>More <i class="fa-solid fa-caret-down"></i></li>
<li id="nth">Submit</li>
<li>
<img src="Gmail_icon_(2020).svg.png" alt="" width="20px">
</li>
<li>
<img src="meta-logo.png" alt="" width="30px">
</li>
</ul>
Edit: Updated to select the sixth immediate li child, instead of every sixth child anywhere under the ul.
Your selector is set up to select the ul that is the 6th child, when it appears you want the 6th li. Not sure what your intent is with the margin, but this will fix your selector:
/* also omitted the '.nav-links' qualifier because it's not in your markup */
ul > li:nth-child(6) {
margin-left: auto;
background: red;
}
<ul>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>More <i class="fa-solid fa-caret-down"></i></li>
<li id="nth">Submit</li>
<li>
<img src="Gmail_icon_(2020).svg.png" alt="" width="20px">
</li>
<li>
<img src="meta-logo.png" alt="" width="30px">
</li>
</ul>
Related
How can i remove my image 11 from class second?
<ul class="second">
<li >
<img class="imgTwo" src="img/11.gif">
<h4>9</h4>
<h5>9.1</h5>
</li>
<li>
<img class="imgTwo" src="img/12.gif">
<h4>10</h4>
<h5>10.1</h5>
</li>
</ul>
Here you go this way:
ul.second > li:first-child .imgTwo {
display: none;
}
This way only the first one will be deleted.
I have a navpar made by css but when show the navbar sub menu it pushes the content underneath down
This is a link to codepen with full code
https://codepen.io/muhamedhashem/pen/GqNQaE
image
html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<ul>
<li>One</li>
<li>
<a href="#">
Two
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Two #1</li>
<li>Two #2</li>
<li>Two #3</li>
</ul>
</li>
<li>
<a href="#">
Three
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Three #1</li>
<li>Three #2</li>
<li>Three #3</li>
</ul>
</li>
<li>
<a href="#">
Four
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
</ul>
</li>
<li>
<a href="#">
Five
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Five #1</li>
<li>Five #2</li>
<li>Five #3</li>
</ul>
</li>
</ul>
</div>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
</body>
</html>
css
.nav {
width:900px;
margin: 0 auto}
ul{
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;}
ul li{
float:left;
width:180px;}
li ul{ display:none;}
li:hover ul{
display:block;}
ul li a{
display:block;
padding: 5px 15px 5px 15px;
background:#69F;
color:#ffffff;
border-top: 1px solid #FFF;
margin-left:1px;}
ul li a:hover{
background:#F80;
color:#fff}
h1 {
clear:both;
}
This is because the navbar itself is growing in height. If you want the navbar to overlap the content, look into z-index and absolute display.
li:hover ul{
position:absolute;
z-index: 10; //can be any number higher than the content's z-index.
width: 180px; //This controls the size of the dropdowns container
display:block;
}
Your sub-menu needs to be set to position absolute and your parent LI needs to be set to position relative. You should set visibility to hidden and then show it for :hover. This method will not push down content.
Also, you need to make sure that you set a width to the ul li ul <--- submenu.
The HTML and CSS code is as follows;
I am using li ul as selectors to make my subjects hidden but it's not working
and I don't know why. Can some one please help (I am new to programming)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
<li> Chemistry Of Biomolecules </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
</ul>
</div>
li ul {
visibility: hidden;
position: absolute;
width: 150px;
}
li:hover ul {
visibility: visible;
}
I think that is what you want
Edit
Also you have error in your HTTML. Your HTML should be like bellow. (Modifying your HTML according your CSS. But this not means that you must write HTML in this way)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
<li> Chemistry Of Biomolecules
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
</ul>
</div>
CSS
li ul{
display:none;
position:absolute;
width:150px;
}
li:hover ul{
display: block;
}
You're selecting al ul tags in li tags, but your HTML is the other way around.
If you change your CSS to ul li { css_here } it should work.
Also when position: absolute; is set to the li items, the ul item doesn't wrap the items anymore, because they are removed from the document layout flow. So you might want to remove the position: absolute;.
I have this list in HTML
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
I want to put a background-color to my first link : 'Category 1' without affecting others links
Here's my CSS
.current_page_parent li:not(.children) a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
You can use first-of-type combined with a > combinator selector
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first.
li.current_page_parent:first-of-type > a{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
li.current_page_parent:first-of-type > a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
</ul>
</li>
<li></li>
<li></li>
</div>
You can add class propery to the particular <a> and directly select the particular attribute by their class name
Here's example:
HTML:
<div id="sideMenu">
<li class="current_page_parent">
<a class="notInULChildren" href="#">Category 1</a>
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
CSS:
.notInULChildren{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
FIDDLE
I used image list style and trying to align it perfectly well with the text in vertical.
JSFiddle: http://jsfiddle.net/uwzW5/
But it seems the text is always down by 2px-3px. How can I fix this issue?
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> Detailed event tracking:
<ul class="sub-feature features-close">
<li> Timestamp</li>
<li> IP</li>
<li> Country</li>
</ul>
</li>
<li> Conversions Tracking
<ul class="sub-feature features-close">
<li> <a >Double tier conversion</a></li>
<li> <a>Configurable cookies</a></li>
<li> Track multiple conversions</li>
<li> Track product ID</li>
<li> Track custom parameters</li>
<li> Track conversion value</li>
<li> Track commission amount</li>
<li> http/https</li>
</ul>
</li>
<li> <a>Google Analytics UMT</a></li>
</ul>
</div>
and css
.feature-ul-section ul li {
list-style-image: url(../img/green-list.png);
font-family:'Source sans pro';
}
.feature-ul-section ul li ul li {
list-style-image: url(../img/grey-list.png);
}
You can add a span element inside each li element and then add CSS style to the span element
Try
HTML:
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> <span>Detailed event tracking:</span>
<ul class="sub-feature features-close">
<li> <span>Timestamp</span></li>
<li> <span>IP</span></li>
<li> <span>Country</span></li>
</ul>
</li>
</div>
CSS:
span{
position:relative;
top:-3px;
}
DEMO