I've recently been looking back into web design and learning new things with it. I am now using the last-of-type selector, and I'm trying to do so for a navigation bar, but it doesn't seem to work the way I want it to.
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
Now, I want to select the last of type li for this, so here is my CSS:
.main-nav ul li:last-of-type {
color: green;
}
I do have a color set for the a element for this, so I have tried adding !important, but it doesn't help at all. The only way I can get it to work is if I make it like this:
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<!--<li>Home</li>
<li>Contact</li>
<li>About Us</li>-->
<li>Home
Contact
About Us
</li>
</ul>
</div>
</nav>
CSS:
/*
.main-nav ul li:last-of-type {
color: green !important;
}
*/
.main-nav ul li a:last-of-type {
color: green;
}
Now, how could I fix this for when I have a li element for each a element, and what is causing this anyways?
Use last-of-type on the <li>, then add an a at the end:
.main-nav ul li:last-of-type a{
color: green;
}
jsFiddle example
So, if I understand your question correctly, you'd like for the last link to be green, using the last-of-type selector:
http://jsfiddle.net/YWfx2/
All you need to do is put the selector on the li and add the a tag after it!
HTML :
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
CSS :
.main-nav ul li:last-of-type a{
color: green;
}
Related
I am trying to set the third link in a list with a different color, but everything does not work well. All colors of the 3 links change to the #5bacc3 color.
Here is my code:
HTML code:
<ul class="nav-section__link">
<li>ABOUT</li>
<li>MENU</li>
<li>SHOP NOW</li>
</ul>
CSS code:
.nav-section__link a:link:last-child,
.nav-section__link a:visited:last-child {
color: #5bacc3;
}
the li is the child of the ul not the anchor tag
.nav-section__link li:last-child a:link,
.nav-section__link li:last-child a:visited {
color: #5bacc3;
}
<ul class="nav-section__link">
<li>ABOUT</li>
<li>MENU</li>
<li>SHOP NOW</li>
</ul>
Well #Thành Nhân, you are targeting <a> tag as last child. But there anchor is the only child and so they are last too.
So target with <li> tags as children of ul
Keep follow hierarchy in css that will help you to get results better and without any error.
.nav-section__link li:last-child a:link,
.nav-section__link li:last-child a:visited {
color: red;
}
<ul class="nav-section__link">
<li>ABOUT</li>
<li>MENU</li>
<li>SHOP NOW</li>
</ul>
I am making a website and I want to make a drop-down list but I have a trouble.
I want to do something like this:
Option A Option B Option C Option D Option E
and a dropdown list to B with 4 options but when I do it, it looks like that:
Option A Option B
.....................Option 1
.....................Option 2
.....................Option 3
.....................Option 4
...........................................Option C Option D Option E
this is my code:
.option {
display: inline-block;
}
.option>li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<div class="option">
<li>Home</li>
<li>Services
<ul>
<li>3D
<li>2D
<li>Websites
<li>IT help
</ul>
</li>
</div>
<div class="option">
<li>Gallery
<li>Contact
<li>About Me
</div>
</ul>
</nav>
</body>
</html>
</nav>
Restructure your HTML
Close your li tags. Make sure you are closing them properly like
this:
<li>Home</li>
Nest all of the top level menu items (Home, Services, Gallery, Contact, About Me) in a single ul
Your HTML should look something like this
<nav>
<ul>
<li>Home</li>
<li>Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Add style
Add a class to the Services li to indicate that it is a dropdown. I am calling mine dropdown
Remove those pesky dots on each list item using list-style: none; padding: 0;
To arrange the top level ul horizontally, make it a flexbox by applying display: flex; on the ul. I would also add flex-wrap: none; to make sure the list does not try to wrap its elements on small screens.
I recommend giving each element of the flexbox a constant width and aligning the text how you like like. I used width: 80px; text-align: center;
Lastly, hide the elements of your dropdown by setting the inner ul's display to none. And show the dropdown by setting display to block. I did this using the class open
ul {
list-style: none;
padding: 0;
}
nav > ul {
display: flex;
flex-wrap: none;
}
nav > ul > li {
width: 80px;
text-align: center;
}
nav > ul > li.dropdown > ul > * {
display: none;
}
nav > ul > li.dropdown.open > ul > * {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Add interaction
Now if you want to actually make the submenu expand, I recommend using JavaScript. In the code snippet above, all you need to do is toggle the class open on any li with the dropdown class.
There are infinite possibilities, but a good place to start is this W3 Schools tutorial on building clickable dropdown menus. Be mindful of accessibility features as well by reading this W3 tutorial on building accessible flyout menues.
Here is a tutorial on building a CSS only accessible dropdown menu; although I recommend sticking to JS solutions, because they are more versatile.
Rudimentary example using JS
const dropdownMenuItems = document.querySelectorAll("li.dropdown");
const toggleDropdown = (e, el) => {
if (e.target.classList.contains("dropdown-control")) {
el.classList.toggle("open");
}
};
dropdownMenuItems.forEach((el) => {
el.addEventListener("click", (e) => toggleDropdown(e, el));
});
ul {
list-style: none;
padding: 0;
}
nav > ul {
display: flex;
flex-wrap: none;
}
nav > ul > li {
width: 80px;
text-align: center;
}
nav > ul > li.dropdown > ul > * {
display: none;
}
nav > ul > li.dropdown.open > ul > * {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Closing thoughts
I kept the styling really barebones. You can of course style however you like. It seems like you are mostly asking about how to get the arrangement right.
It probably makes sense to change the Services a tag to a button if it does not behave like a link. This is important for screen readers to know how to treat that element.
Here's how I would do it: It's a little bare, but it works. I would make each li have the class of option and get rid of the divs so that it is more consistent and simpler. Also, you were missing all of your closing li tags, which messed some things up. I also added a simple :hover mechanism so that it will hide and show when you hover over it.
.option {
display: inline-block;
vertical-align: top;
width: 75px;
margin: 0;
padding: 0;
}
.dropdown {
display: none;
padding: 0;
list-style-type: none;
}
.contains-dropdown:hover > .dropdown{
display: block
}
option>li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li class="option">Home</li>
<li class="option contains-dropdown">
Services
<ul class="dropdown">
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li class="option">Gallery</li>
<li class="option">Contact</li>
<li class="option">About Me</li>
</ul>
</nav>
</body>
</html>
</nav>
I seem to not be able to make the JOIN link in my navigation bar the colour gold (#ba9a45) using css nth child or by using the alternative class "join" and adding a value of gold (#ba9a45).
This is my code so far:
<ul>
<li>HOME</li>
<li>CASINO</li>
<li>HOTEL</li>
<li>ENTERTAINMENT</li>
<li>EVENTS</li>
<li>MEMBERS</li>
<li>JOIN</li>
</ul>
Using nth-child
.navbar li a:nth-last-child{
color: #ba9a45;
}
Using class="join"
.navbar li a{
.join{
color: #ba9a45;
}
}
How can I fix this issue using both nth-child and alternatively the class "join"?
You can achieve this by one of the following. Also make sure the relevant parent div or <ul> has the class of .navbar
.navbar li:last-child a {
color: #ba9a45;
}
OR:
.navbar li a.join {
color: #ba9a45;
}
and if the parent div has the class .navbar the correct CSS would be:
.navbar ul li:last-child a {
color: #ba9a45;
}
Add & before join class
.navbar li a{
&.join{
color: #ba9a45;
}
}
Demo in css
.navbar li a.join{
color: #ba9a45;
}
<ul class="navbar">
<li>HOME</li>
<li>CASINO</li>
<li>HOTEL</li>
<li>ENTERTAINMENT</li>
<li>EVENTS</li>
<li>MEMBERS</li>
<li>JOIN</li>
</ul>
or
Add :last-child in <li>
.navbar li:last-child a{
color: #ba9a45;
}
Demo in css
.navbar li:last-child a{
color: #ba9a45;
}
<ul class="navbar">
<li>HOME</li>
<li>CASINO</li>
<li>HOTEL</li>
<li>ENTERTAINMENT</li>
<li>EVENTS</li>
<li>MEMBERS</li>
<li>JOIN</li>
</ul>
The CSS rules aren't being applied to the html document.
nav > a {
color: #ffffff;
}
<nav>
<ul>
<li>About</li>
<li>Store</li>
<li>Login</li>
</ul>
</nav>
The expectation is that the color would be white, it isn't it nothing changes.
The > means "direct child" and in your case it's not a direct child. You can use nav a which means "every a in nav"
nav a {
color: #ffffff;
}
<nav>
<ul>
<li>About</li>
<li>Store</li>
<li>Login</li>
</ul>
</nav>
Try it
nav > ul > li > a {
color: #ffffff;
}
Your problem is with the >, do this in your css instead:
nav a {
color: #ffffff;
}
I have a class of div's with the class footer-list, and I need to change all the text of the li to be white.
The html looks like:
<div id="footer-middle-left-right">
<div class="footer-list">
<ul>
<li>FAFSA Guide</li>
<li>Scholarship Finder</li>
<li>State Education</li>
<li>Ready UP</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li>Terms of Service</li>
<li>Privacy Settings</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li>How it Works</li>
<li>Submit a School</li>
<li>Submit a Professor</li>
<li>Report a Misspelling</li>
</ul>
</div>
</div>
Obviously adding another class element to all the li is overkill, and not maintainable really. Im pretty new to css and can't figure out the correct way to select all the li in the classes.
I tried something like:
.footer-list.li{
color: white;
}
to no avail. Any help about this, suggested reading, or any other css advice would be greatly appreciated! Im more of a back-end guy so this is the first I've really had to worry about css part of this, so it's gotten me a bit lost!
Actually you are adding a . before li which makes it a class so try this
.footer-list li { /* This selects li inside the class .footer-list */
color: #fff; /* Even white is fine */
}
Or better be specific and use
.footer-list ul li { /* Will apply to li which are inside ul which is inside .footer-list only */
color: #fff;
}
Your selector:
.footer-list.li{
color: white;
}
Says "select elements with BOTH classes footer-list and li."
This is incorrect for what you want, you have to add a space between them and remove the dot:
.footer-list li{
color: white;
}
This will select any <li> within any element with the class footer-list :)
Just remove the dot before li
.footer-list li{
color: white;
}