These are selectors that go beyond what is specified in the document. The selectors select things that may not even be elements in the document. Pseudo-elements are not considered part of a simple selector. This means that you cannot use a pseudo-element as part of the :not()
selector. Finally, only one pseudo-element can be present per selector.
Note that all of the pseudo-elements start with a double colon (::
). This was introduced in CSS3 to help differentiate between pseudo-classes that have a single colon (:
). This is important because in CSS2, pseudo-elements only had the single colon. For the most part, you should use the double colon.
These are used to insert generated content before or after the selected element:
::before ::after e
This will insert content into the document based on the selector. Whether the content is placed before or after the element targeted depends on the pseudo-element used. Refer to the Generated content section to see what you can insert.
Here is an example that uses both ::before
and ::after
. This will create a turkey sandwich. Here is the HTML.
<p class="sandwich">Turkey</p>
Here is the CSS that will put a slice of bread before and after the turkey:
p.sandwich::before, p.sandwich::after { content: ":Slice of Bread:"; }
This targets the first letter of an element:
::first-letter
This will select the first letter of an element as long as it does not have any other content before it, for example an img
element before a character would make ::first-letter
not select the first character. Any punctuation that either precedes or follows the first letter would be included with the first letter. This will select any character, including not just letters but also numbers.
This only applies to block-like containers such as block, list-item
, table-cell
, table-caption
, and inline-block
elements.
The ::first-letter
pseudo-element will only match if the first letter is on the first formatted line. If there is a line break before the first letter appears, it will not be selected.
Here is an example, which will not select the first letter:
<p><br />First letter</p>
Here is the CSS:
p::first-letter { font-size: 2em; }
<p>This is a long line of text that may or may not be broken up across lines.</p>
Here is the CSS. The T in This will be two times the font size of all the other characters:
p::first-letter { font-size: 2em; }
The
::first-line
attribute targets the first line of an element:
::first-line
This will target the first formatted line of a block-like container such as a block box
, inline-block
, table-caption
, or table-cell
.
Here is an example, with the following HTML:
<p>This is a long line of text that may or may not be broken up across lines based on the width of the page and the width of the element it is in.</p> <p>This is the entire first line.</p>
Here is the CSS. This will make the first line, whatever it may be, red:
p::first-line { color: #ff0000; }
This targets text highlighted by the user:
::selection
This pseudo-element allows you to style any text that is highlighted by the user. This pseudo-element does not exist in CSS3, but it is part of the next version. Most browsers will still honor this pseudo-element.
Here is an example:
<p>Highlight this to text.</p>
Here is the CSS. When the text is selected, the text will be white on a red background:
::selection { color: #ffffff; background: #ff0000; }
18.221.179.220