nth-of-type Selector
CSS nth-of-type Selector reference
The CSS nth-of-type structural pseudo-class selector ( X:nth-of-type() { } ) is used to target and style specified child elements according to their position in their specified parent element. This selector is similar to the X:nth-child() selector, but differs by only counting specified elements to make selections and it does not count other element types in the parent.
Paragraph content...
Paragraph content...
CSS CODE EXAMPLE
<!DOCTYPE html>
<style type="text/css">
div p:nth-of-type(3) {
color:#F0F;
font-weight:bold;
}
</style>
<div>
<h3>Heading content</h3>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>
<hr />
<div>
<h3>Heading content</h3>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>
<style type="text/css">
div p:nth-of-type(3) {
color:#F0F;
font-weight:bold;
}
</style>
<div>
<h3>Heading content</h3>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>
<hr />
<div>
<h3>Heading content</h3>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>
Heading content
Paragraph content...Paragraph content...
Paragraph content...
Heading content
Paragraph content...Paragraph content...
Paragraph content...
0 Response to "nth-of-type Selector"
Post a Comment