August 9, 2016

Pseudo-Elements ::first-letter AND ::first-line

pseudo-elements

Pseudo-Elements

In this lesson, we will work with the ::first-letter and ::first-line pseudo-elements. Very similar to PSEUDO-CLASSES, pseudo-elements are used to style specific parts of an element, while pseudo-classes describe a certain state. For example, they can be used to style the first letter or first line of a paragraph, add content before or after the elements content, or to style content that a user selects. NOTE: You may get mixed results in some versions of Internet Explorer and Mozilla Firefox. A prefix may be added to the CSS property for certain pseudo-elements to allow compatibility of a specific browser. We will discuss prefixes more in this lesson. See the first set of images below, for Example 1.

index.html Example 1: ::first-line and ::first-letter pseudo-elements

pseudo-elements ::first-line and ::first-letter html

my-styles.css Example 1: ::first-line and ::first-letter pseudo-elements

pseudo elements first-line and first-letter css

Displayed Page Example 1

pseudo-element displayed page

In the index.html document, we have added a simple P ELEMENT for this exercise. Over in the my-styles.css document, we have two CSS rules with the pseudo-elements added on. NOTE: The difference between a pseudo-class and a pseudo-element is the double colon (::). In earlier versions of CSS (CSS1 and CSS2), a single colon was used for both pseudo-classes and pseudo-elements. It was replaced with the double colon in CSS3 to help distinguish the difference between the pseudo-class and pseudo-element. The single colon syntax is still acceptable in CSS1 and CSS2 for backward compatibility.

Our first CSS rule with the selector/pseudo-element of p::first-letter will affect the first letter of our paragraph by making the letter COLOR red and FONT-SIZE xx-large. The second CSS rule with the selector/pseudo-element of p::first-line affects the very first line of our paragraph. We are underlining it with the text-decoration: underline; declaration. You should know that if we add more paragraphs to our html document, they too will be affected by these CSS rules because they are global rules. Pseudo-classes and pseudo-elements can be used in combination with CSS CLASSES to target specific elements. An example of the syntax is below.


p.main-content::first-letter {
  color: blue;
  font-size: 150%;
}

The ::first-letter and ::first-line pseudo-elements can only be used on BLOCK-LEVEL elements. See the two lists below for properties that can be applied to the ::first-line and ::first-letter pseudo-elements

CSS PROPERTIES THAT APPLY TO THE ::first-letter PSEUDO-ELEMENT

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • line-height
  • text-decoration
  • text-transform
  • vertical-align (only if float has a value of “none”)
  • float
  • clear

CSS PROPERTIES THAT APPLY TO THE ::first-line PSEUDO-ELEMENT

  • font properties
  • color properties
  • background properties
  • text-decoration
  • text-transform
  • line-height
  • letter-spacing
  • word-spacing
  • vertical-align
  • clear

We’re going to finish up part 1 of this two-part lesson here. Try out a few of the properties from the lists above on different elements to see what type of result you get. Thanks for reading, I’ll see you in part 2 of Pseudo-elements where we’ll work with ::before, ::after, and ::selection.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Pseudo-Elements</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<p>We will target and style the first letter and first line of this paragraph with the
pseudo-elements <strong>::first-letter</strong> and <strong>::first-line</strong>.
The rest of this text is here to add more content to our paragraph. The rest of this
text is here to add more content to our paragraph. The rest of this text is here to
add more content to our paragraph. The rest of this text is here to add more content
to our paragraph.</p>

</body>
</html>

my-styles.css Source Code


p::first-letter {
color: red;
font-size: xx-large;
}

p::first-line {
text-decoration: underline;
}

Clear Coded Programming

Please Leave a comment