How To Select Particular Portion Of An HTML Document Using CSS

While designing web pages, you may face a problem in which you want to select particular portion of an HTML document but there is not a defined element associated with it. CSS provides the ability to style portions of a document tree without a unique element associated with the content. CSS creates an element to effect this change in a particular portion of an HTML document, such selectors are called pseudo-element selectors. Here I am describing syntax and examples of different pseudo-element selectors used in CSS.

Table of Contents

:first-letter and :first-line Pseudo-Elements

If you want to style the first line of a paragraph or a first character of a paragraph, it would be easy enough to specify a CSS selector. However, we might not actually have a full element that the rule is bound to, so a pseudo-element is thus implied. For example If you want to make the first character of a paragraph large, which was usually in Newspaper design, you can use pseudo-element rule :first-letter to bind style.

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

It would make every first letter of paragraph large and red. You can also make the initial line of paragraph a different style using the :first-line pseudo-element.

p:first-line {font-size:large; font-weight:bold;}

It would make every first line of paragraph large and bold. These pseudo-classes aren’t limited to <p> tags but they are generally limited to block elements.Under CSS3, the syntax of pseudo-elements has been changed to have two colons, so :first-line becomes ::first-line and :first-letter becomes ::first-letter.

Example:

Here is an example to illustrate the uses of :first-letter and :first-line Pseudo-Elements in HTML document.

CSS code: p:first-letter {font-size:5em; color:red; font-weight:bold; float:left; margin-right:0.1em}
p:first-line {font-size:x-large; font-weight:bold;}

HTML code: <body><p>It was the first paragraph, the first letter of the paragraph was 5em, bold and red. The first line of this paragraph was large and bold, letters in rest of the paragraph are normal</p></body>

Demo:

See the Pen jPJLJX by Shuseel Baral (@shuseel) on CodePen.

:before and :after Pseudo-Elements

:before and :after Pseudo-Elements are very useful pair of pseudo-elements, they are under CSS3 are written as :before and ::after. These selectors are used to add generated content before or after an element and nearly always are combined with the CSS2 property content, which is used to insert dynamically generated content. For example the rule to insert special image before and after article includes the following.

div.article:before {content: url(article-start.png);}
div.article:after {content: url(article-end.png);}

Example:

Here is an example to illustrate the uses of :before and :after Pseudo-Elements in HTML document.In the first CSS code, external site image will be added after external link and in the second and third CSS code a text is inserted before and after paragraph.

CSS code: ext:after {content:url('external.png'); margin-left:2em;}
.warning:before {content:"Warning!"; background-color:pink; border:1px blue dashed; margin-right:1em;}
.warn:after {content:"The End"; background-color:brown; border:2px red solid; margin-left:1em;}

HTML code: <p><a href="#">This is local link</a><br>
<a href="http://www.codepen.io" class="ext">This is External link</a></p>

<p class="warn">This is warning paragraph. Here warning text is added before the paragraph and ending text is added after the paragraph</p>

Demo:

See the Pen VLRzNb by Shuseel Baral (@shuseel) on CodePen.

::selection Pseudo-Element

CSS3 introduces a pseudo-element ::selection that is used to style parts of an element that is currently selected. For example the rule to style the highlighted text includes the following.

p::selection {background-color:pink;}

Example:

Here is an example to illustrate the uses of ::selection Pseudo-Elements in HTML document.

CSS code:#select1::-moz-selection { color: blue; background: brown;}
#select1::selection {color: blue; background: brown;}
#select2::-moz-selection { color: green; background: pink;}
#select2::selection {color: green; background: pink;}

HTML code: <p id="select1">This is first paragraph. It has pink background at the time of selection of text.</p>
<p id="select2">This is second paragraph. It background color will be light blue while selecting</p>