Target ul and li within div using css

Asked 16/3, 2016 at 3:58 Answered 16/3, 2016 at 5:2

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;
}

Rogan answered 16/3, 2016 at 3:58 Comment(2)

Remove the dot in front of ul and li in your CSS – Habile 16/3, 2016 at 4:2

Remove the "." from ul and li in your css – Alrick 16/3, 2016 at 4:3

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>

Fleeman answered 16/3, 2016 at 5:2 Comment(0)

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.

Guria answered 16/3, 2016 at 4:2 Comment(0)

.navbar_div ul , .navbar li {
 //whatever goes here
}

Seessel answered 16/3, 2016 at 4:5 Comment(0)

Recommended topics

Hot tags