- ::first-letter
- ::first-line
- ::first-letter + ::first-line
- :first-of-type
- :first-child
- Differences between :first-of-type vs :first-child
- When to use double-colon notation (::) or single-colon notation (:)
::first-letter
::first-letter is a CSS pseudo-element*1 used to customize CSS styling of the first letter within a block-level element.
| CSS pseudo-element | ::first-letter |
CSS:
div{
font-size: 15px;
line-height:1.5em;
padding: 20px;
font-family: serif;
}
div::first-letter{
color: #ff9800;
font-size: 3em;
font-weight: bold;
text-shadow: 2px 2px #C97373;
}
HTML:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed scelerisque erat estibulum turpis mauris, imperdiet vel purus a, porttitor maximus felis.
<br>
Ut dignissim sem nec volutpat efficitur.
<br>
Nullam nec sapien nec magna fringilla finibus.
</div>
<div>
Quisque nec purus tortor. Aliquam convallis purus in ultrices placerat. Praesent sed eros molestie eros euismod euismod. Donec mattis suscipit hendrerit. Sed ac ex pretium, viverra justo vitae, dapibus sem.
<br>
Proin fringilla tempus mi eget commodo. Ut non ante ex. Curabitur iaculis hendrerit diam, a commodo dolor condimentum sed. Aliquam non nisi efficitur
</div>
Result:
Ut dignissim sem nec volutpat efficitur.
Nullam nec sapien nec magna fringilla finibus.
Proin fringilla tempus mi eget commodo. Ut non ante ex. Curabitur iaculis hendrerit diam, a commodo dolor condimentum sed. Aliquam non nisi efficitur
::first-line
::first-line is a CSS pseudo-element*1 used to customize CSS styling of the first line of a paragraph within a block-level element.
| CSS pseudo-element | ::first-line |
CSS:
div{
font-size: 15px;
line-height:1.5em;
padding: 20px;
}
div::first-line{
color: #fff;
background: #061A25;
}
HTML:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed scelerisque erat estibulum turpis mauris, imperdiet vel purus a, porttitor maximus felis.
<br>
Ut dignissim sem nec volutpat efficitur.
<br>
Nullam nec sapien nec magna fringilla finibus.
</div>
<div>
Quisque nec purus tortor. Aliquam convallis purus in ultrices placerat. Praesent sed eros molestie eros euismod euismod. Donec mattis suscipit hendrerit. Sed ac ex pretium, viverra justo vitae, dapibus sem.
<br>
Proin fringilla tempus mi eget commodo. Ut non ante ex. Curabitur iaculis hendrerit diam, a commodo dolor condimentum sed. Aliquam non nisi efficitur
</div>
Result:
Ut dignissim sem nec volutpat efficitur.
Nullam nec sapien nec magna fringilla finibus.
Proin fringilla tempus mi eget commodo. Ut non ante ex. Curabitur iaculis hendrerit diam, a commodo dolor condimentum sed. Aliquam non nisi efficitur
::first-letter + ::first-line
If you apply ::first-letter and ::first-line together, styling from ::first-letter will have higher priority and it will overwrite styling from the ::first-line.
CSS:
div{
font-size: 15px;
line-height:1.5em;
padding: 20px;
}
div::first-letter{
color: #ff9800;
font-size: 3em;
font-weight: bold;
text-shadow: 2px 2px #C97373;
}
div::first-line{
color: #fff;
background: #061A25;
}
HTML:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed scelerisque erat estibulum turpis mauris, imperdiet vel purus a, porttitor maximus felis.
<br>
Ut dignissim sem nec volutpat efficitur.
<br>
Nullam nec sapien nec magna fringilla finibus.
</div>
<div>
Quisque nec purus tortor. Aliquam convallis purus in ultrices placerat. Praesent sed eros molestie eros euismod euismod. Donec mattis suscipit hendrerit. Sed ac ex pretium, viverra justo vitae, dapibus sem.
<br>
Proin fringilla tempus mi eget commodo. Ut non ante ex. Curabitur iaculis hendrerit diam, a commodo dolor condimentum sed. Aliquam non nisi efficitur
</div>
Result:
Ut dignissim sem nec volutpat efficitur.
Nullam nec sapien nec magna fringilla finibus.
Proin fringilla tempus mi eget commodo. Ut non ante ex. Curabitur iaculis hendrerit diam, a commodo dolor condimentum sed. Aliquam non nisi efficitur
:first-of-type
:first-of-type is a CSS pseudo-class used to select the first element of a particular type from its parent.
| CSS pseudo-class | : |
CSS:
div{
font-size: 15px;
line-height:1.5em;
padding: 20px;
}
div sup:first-of-type {
background-image: linear-gradient(to right, #8b0000 , #ff9800);
color: white;
padding: 0 4px;
}
HTML:
<div>
Winner <br>
<sup>1st Prize</sup> Adam <br>
<sup>2nd Prize</sup> Tony <br>
<sup>3rd Prize</sup> Sara <br>
</div>
Result:
1st Prize Adam
2nd Prize Tony
3rd Prize Sara
:first-child
:first-child is a CSS pseudo-class used to select a specified selector of an element that is the first child from its parent.
| CSS pseudo-class | : |
CSS:
div{
font-size: 15px;
line-height:1.5em;
padding: 20px;
}
div p:first-child {
color: #fff;
background: #061A25;
}
HTML:
<div>
<p><em>The first paragraph -</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus egestas consequat.</p>
<p><em>The second paragraph -</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus egestas consequat.</p>
<p><em>The third paragraph -</em> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus egestas consequat.</p>
</div>
Result:
The first paragraph – Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus egestas consequat.
The second paragraph – Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus egestas consequat.
The third paragraph – – Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus egestas consequat.
Differences between :first-of-type vs :first-child
In this example, :first-of-type will select the first <p> element from its parent while :first-child will only select the first <p> element which is also the first child from its parent.
Example for :first-of-type
div p:first-child {
color: #fff;
background: #061A25;
}
<div>
<strong>The first child : Title</strong>
<p>The second child : The first <p/> element from its parent.</p>
<p>The third child :The second <p/> element from its parent.</p>
<p>The fourth child :The third <p/> element from its parent.</p>
</div>
The second child : The first <p/> element from its parent.
The third child :The second <p/> element from its parent.
The fourth child :The third <p/> element from its parent.
Example for :first-child
div p:first-of-type {
color: #fff;
background: #ff9800;
}
<div>
<p>The first child + <p/> element from its parent.</p>
<p>The second child + second <p/> element from its parent.</p>
<p>The third child + third <p/> element from its parent.</p>
</div>
The first child + <p/> element from its parent.
The second child + second <p/> element from its parent.
The third child + third <p/> element from its parent.
When to use double-colon notation (::) or single-colon notation (:)
In CSS3, double & single colon are used to differentiate between pseudo-class and pseudo-elements.
For pseudo-element, use Double-colon notation (::).
Example, ::first-line, ::first-letter
For pseudo-class, use Single-colon notation (:).
Example, :first-of-type, :first-child
** for pseudo-element, browsers still accept :first-letter and :first-line in single-colon notation which was introduced earlier in CSS2. Both of them are working exactly the same as ::first-line and ::first-letter in double-colon notation.
** for pseudo-class, browsers will only accept Single-colon notation (:)
ui pencil 
Leave a Reply