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.
: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:
: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.
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>
::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>
Demo:
Read Next:How to Style Multiple Sections of an HTML Document Using CSS
Related Posts:
How to make rounded corners border using CSS
How to Create Custom CSS Template for Printing
How to Create Responsive Website or Blogger Template
How To Make Simple CSS Stylesheet for a Website ?
How To Create Simple Menu Using CSS ?
How to Style Webpages Using Basic and Core CSS Selectors
How to Design Webpages using CSS Attribute Selectors
Post a Comment