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

In the following, how can I refer to the class "name"?

<div class="resultDetails">
<span class="name">Name</span>
<span class="address">Address</span>
</div>
+5
source share
4 answers
div span.name { ... }

div.. indicates the type of element

space then span.. says to see span elements in subselects

.name.. says to look at these elements with a css class named name

+7
source

simply

<style>
.name
{

}
</style>

All you need is the name of the class itself, if only 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 to choose, but you get the point.

+3
source
div.resultDetails > span.name { ... }

.

+2

div.resultDetails > span.name .

However, it does not work in IE6. If this is a problem, just use: div.resultDetails span.name {} should set the range correctly (assuming you don't have nested span.name elements inside the div that you are not going to target).

+1
source

All Articles