Menu
I'm trying to find a way to target the <ul> and <li> markups but only within a specific <div>, not for the entire page. I have this in the HTML:
<div id="navbar_div">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
In the CSS I would like to do something like:
div#navbar_div {
float:right;
}
div#navbar_div .ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div#navbar_div .li {
display: inline;
}
603
first thing is you should remove the . sign from the ul in your css.
we use . signt to define a class and # sign to define an id.
but for default elements or tags provided by html, we don't want to use those. we can use just there name.as an example if we put some style to body we can write like this.
body{
background-color:black;
}
to get an better idea, I wrote a small code for you.hope this will help
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
margin:0;
padding: 0;
}
/* add styles only to for 'ul' element, inside the id="one" div */
div#one ul{
list-style-type: none;
color: orange;
}
/* add style only to the 'li' elements inside the id="one" div. this means 'li' inside the 'ul' inside the 'div' which its id="one" */
div#one ul li{
display: inline;
margin: 20px;
}
</style>
<body>
<div id="one">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
<div id="two">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
