CODEWITHSUNDEEP
htmlcss
Holly
Holly

Reputation: 1976

Quick beginner CSS, how to "scope" styles?

Excuse the poor phrasing, I know it's possible but I can't figure out what to google so I'll just explain it like so..

I have this html:

<div class="navbar_links">
<ul>
<li><a href="www.google.com">Home</a></li>
<li><a href="www.google.com">About</a></li>
<li><a href="www.google.com">Speakers</a></li>
<li><a href="www.google.com">Exhibitors</a></li>
<li><a href="www.google.com">Agenda</a></li>
<li><a href="www.google.com">Location</a></li>
</ul>
</div>

and then later on I might have another list..

All I want to do is style just the <ul> / <li> items for the class navbar_links. Not for any occurrence of an unordered list in the html, just an unordered list found within <div class="navbar_links"> Could someone explain to me how to do that? And for future reference, let me know what it's "called" so I don't have to waste SO's time with something I know I should have been able to google, sorry :P

Upvotes: 3

Views: 237

Answers (5)

canon
canon

Reputation: 41665

Like so:

.navbar_links ul

Here's a sample fiddle: http://jsfiddle.net/AWWmc/1

Upvotes: 5

kojiro
kojiro

Reputation: 77069

What you're looking for are called CSS Selectors or more specifically, the class selector. e.g.

.navbar_links ul, /* Select all ul within elements of class='navbar_links' */
.navbar_links ul > li /* Select all li that are *children* of a ul within els of class='navbar_links' */

(The second example would not select the inner li of <div class='navbar_links'><ul><li><ol><li>…)

Upvotes: 2

peacemaker
peacemaker

Reputation: 2591

You can just use:

.navbar_links ul

to do what you want.

Upvotes: 2

Andrew
Andrew

Reputation: 1357

You're looking for CSS selectors: www.w3.org/TR/CSS2/selector.html

In this case, you can write the following:

.navbar_links ul {
  /* put styles for ul here */
}

Upvotes: 6

matthewvb
matthewvb

Reputation: 942

Use .navbar_links ul or .navbar_links li depending on what you actually want to style. This will restrict the styling to only those items that fall inside the navbar_links class.

Upvotes: 7

Related Questions