CODEWITHSUNDEEP
htmlcss
alpheus
alpheus

Reputation: 989

What is the CSS syntax for a named span class nested in a div?

In the following, how do I reference the "name" class?

<div class="resultDetails">
<span class="name">Name</span>
<span class="address">Address</span>
</div>

Upvotes: 6

Views: 45853

Answers (4)

Patrick Evans
Patrick Evans

Reputation: 42736

simply

<style>
.name
{

}
</style>

All you need is the name of the class itself, unless other factors otherwise you can use several types of selectors

div span.name // selects all spans with class "name" in any div
div > span.name // this one selects only the spans that are direct children of a div
div.resultDetails span.name //select only spans with class "name" in only divs with class="result Details
.resultDetails .name // selects any element with class "name" in any element with class "resultDetails"

There are more ways of selecting but you get the point.

Upvotes: 6

user368191
user368191

Reputation: 

div span.name { ... }

div .. tells the element type

a space then span .. tells to look at span elements in sub levels

.name .. tells to look at those elements with css class named name

Upvotes: 15

jacobangel
jacobangel

Reputation: 6996

div.resultDetails > span.name works in most browsers.

However, it doesn't work in IE6. If that's an issue, just using: div.resultDetails span.name {} should target the span correctly (provided you dont have any nested span.name elements inside the div that you don't intend to target).

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101604

div.resultDetails > span.name { ... }

Should work.

Upvotes: 5

Related Questions