CSS pseudo-elements and attributes selectors

Pseudo-elements
Pseudo-element ::first-letter
Pseudo-element ::first-line
Pseudo-elements ::before and ::after
Attribute selector

Pseudo-elements

Pseudo-elements allow you to stylize certain parts of a document. For example, a pseudo-element ::first-line is intended to add styles only to the first line of a specified element. In the CSS3 specification, pseudo-elements begin with a double colon :::

p::first-letter { font-size: 120%; }

A double colon was introduced in CSS3 to visually differentiate pseudo-classes and pseudo-elements. However, pseudo-elements that were added in CSS2 (such as: first-letter, first-line, before and after) can be written with a single colon, this syntax was used before the CSS3 specification appeared and is supported by all browsers. The double-colon syntax is only supported in newer versions of browsers and must only be applied to a pseudo-element ::selection, which was added to CSS3.

Note: each selector can contain only one pseudo-element, which must be defined at the end of the selector:

#header .menu span::first-letter { color: green; }

Pseudo-element ::first-letter

Pseudo-element ::first-letter allows you to apply a style to the first letter in the text of the element. For example, to stylize the first letter in a paragraph, we would have to enclose it in a <span> element and apply the style to it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  .firstletter {
	    font-size: 150%;
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
    <p><span class="firstletter">O</span>ur text</p>
  </body>
</html>

Try it »

Or we can stylize the first letter in the text with the pseudo-element ::first-letter, in which case we do not have to add an extra element to the HTML markup:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  p::first-letter {
	    font-size: 150%;
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
    <p>Our text</p>
  </body>
</html>

Try it »

Pseudo-element ::first-line

The pseudo-element ::first-line applies the style to the first line of text in the element:

p { width: 200px; }
p::first-line { color: blue; }

Try it »

The peculiarity of the pseudo-element ::first-line is that it will only stylize the first row, the width of which will depend on the width of the element, that is, on smaller screens or when the browser window is reduced, the width of the first line will change, but its appearance will remain unchanged.

Pseudo-elements ::before and ::after

To add the generated content to the document, the ::before and ::after pseudo-elements are used. With their help, you can place the generated content before and after the content in the specified element. To determine the content to be added, the CSS content property is used.

Let's say that we have a large enough text, it contains links, but in terms of design, they practically do not differ from the rest of the text. And we need to put a small icon before each link that will tell users what the link is:

a { 
  text-decoration: none;
  color: black;
}
a::before { content: url("link.png"); }

Try it »

Attribute selector

Attribute selectors are supported by all modern browsers (except IE6, although it can no longer be attributed to modern browsers, it is worth considering the fact that some users still use it. Therefore, if you need to write code that works equally well in all browsers, including IE6 , then we advise you to refrain from using attribute selectors).

Attribute selectors allow you to select a specific element without using an identifier or class. To access an element, you just need to know whether the element you want contains a specific attribute:

img[alt] { border: 1px solid red; }

In the example above, the rule will apply to all <img> elements that have the alt attribute. But in addition to a simple selection of elements by attributes, attribute selectors allow you to select items based on the value of the attribute:

element[attribute^="value"] - attribute selector with matching by substring. The statement ^= means "begins with ...".
element[attribute$="value"] - attribute selector with matching by substring. The statement $= means "ends with ...".
element[attribute*="value"] - attribute selector with matching by substring. The statement *= means "contains a substring ...".

As an example, here is the design of links referring to an external resource, an email address and a file with the extension .pdf:

a[href^="http:"] {
  padding-left: 20px;
  background-image: url("img1.png");
  background-repeat: no-repeat;
}
a[href^="mailto:"] {
  padding-left: 20px;
  background-image: url("img2.png");
  background-repeat: no-repeat;
}
a[href$=".pdf"] {
  padding-left: 20px;
  background-image: url("img3.png");
  background-repeat: no-repeat;
}

Try it »

In these situations, attribute selectors are useful for making attractive additions to the design of your web pages.