selector::pseudo-element {
property: value;
}
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Note: The ::first-line pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-line pseudo-element:
Notice the double colon notation - ::first-line versus :first-line
The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Note: The ::first-letter pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-letter pseudo- element:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
The example above will display the first letter of paragraphs with class="intro", in red and in a larger size.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
h1::before {
content: url(smiley.gif);
}
h1::after {
content: url(smiley.gif);
}
::marker {
color: red;
font-size: 23px;
}
::selection {
color: red;
background: yellow;
}
Exercise:
Set the background-color to red, of the first line of the paragraph.
<style>
____ {
background-color: red;
}
</style>
<body>
<p class="intro">
In my younger and more vulnerable years
my father gave me some advice that I've
been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world
haven't had the advantages that you've had.'
</p>
</body>
<style>
.intro::first-line {
background-color: red;
}
</style>
<body>
<p class="intro">
In my younger and more vulnerable years
my father gave me some advice that I've
been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world
haven't had the advantages that you've had.'
</p>
</body>
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|