Target ul and li within div using css
Question
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;
}
3 answers
solution1
10 ACCPTED 2016-03-16 05:02:04
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>
solution2
2 2016-03-16 04:05:02
.navbar_div ul , .navbar li {
//whatever goes here
}
solution3
1 2016-03-16 04:02:28
Remove the periods before ul and li . Periods signify classes. ul and li are native HTML tags, therefore you can reference them as they are.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.