Hi Eric,
It's not quite as simple as that 
When you say .column:nth-of type(3) then the browser will first check what element has the class of .column applied ( there may be more than one type of element to take note of). If .column is applied to a p element for example then the browser will count from that the first p element (irrespective of its class) and find the third p element in sequence but will only apply the rule if that third element in sequence has a class of .column. It does not look for three .column classes but looks from the first p element and then finds the third of that type but only applies the rule if that third of type has the class.
e.g.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#home #main .column:nth-of-type(3) { background:red; }
</style>
</head>
<body id="home">
<div id="main">
<div class="column">div class</div>
<div>test</div>
<div>div class</div>
<div class="column">div class</div>
<div class="column">div class</div>
</div>
</body>
</html>
Nothing in the above will get targeted because the third div in sequence doesn't have a class of column.
However:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#home #main .column:nth-of-type(3) { background:red; }
</style>
</head>
<body id="home">
<div id="main">
<div class="column">div class</div>
<div>test</div>
<div class="column">div class</div>
<div class="column">div class</div>
<div class="column">div class</div>
</div>
</body>
</html>
In the above the third div will have a background of red but note that it is only the second instance of the .column class.
So to recap the browsers first checks what element the class belongs to and then it finds the third of that element. If that third element doesn't have the same class then no match is made. There could also be other element intermingled in the above with a class of column and they would get selected on the same basis as above and each treated separately.
At least that's how my tests and expectations show it working.
Reply With Quote
Bookmarks