CODEWITHSUNDEEP
htmlcsshtml-lists
Dan
Dan

Reputation: 2344

Target ul and li within div using css

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

Upvotes: 10

Views: 63380

Answers (3)

caldera.sac
caldera.sac

Reputation: 5088

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>

Upvotes: 17

Matthew Gaim
Matthew Gaim

Reputation: 21

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

Upvotes: 2

Eric Guan
Eric Guan

Reputation: 15982

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.

Upvotes: 3

Related Questions