Saturday, January 26, 2019
WHAT YOU SHOULD KNOW ABOUT PSEUDO CLASSES AND PSEUDO ELEMENTS
CSS
,
CSS3
,
ELEMENTS
No comments
:
Hi, in today’s lesson, I will be teaching you how to use pseudo classes and pseudo elements in Cascading Style sheet without making reference to JavaScript or any other scripts. Prior to the release of CSS 3, it was almost, (if not absolutely) impossible to style an element or part of an element in a document without using scripting languages like JavaScript, and so on. Hence, the integration of pseudo classes and pseudo-elements in the latest version of Cascading Style Sheet brought joy unspeakable to most web designers and developers. Therefore, with the knowledge HTML and CSS, you can still do amazing miracles to the making of a fully-fledged website. Let’s briefly discuss the subject of our discourse before heading straight to examples.
1. Pseudo Class
A pseudo-class is a remarkable feature in CSS 3 that enables web designers or developers to add style to a certain element (e.g. text,) in a document independent of scripting languages. A pseudo-class usually begins with a colon (:) in Cascading Style Sheet (CSS). The :first-child pseudo class, and the :last-child pseudo class are the most popularly used pseudo-classes in CSS. However, professional web designers and developers, in addition, make use of .nth child (n) because it accepts integer values. The :first-child pseudo class, and the :last-child pseudo class is very common in CSS. Just as the name implies, there’s an iota of difference between the :first-child pseudo class and the :last-child pseudo class. The former corresponds to an element that is the first child element other elements, while the latter matches the last child of other elements. For proper understanding, let’s hit the brake pedal in other to exemplify the above. Write the following codes in your text editor.
HTML
<div id="parent">
<p> This is your first paragraph</p>
<p> This is your second paragraph</p>
<p> This is your third paragraph</p>
<p> This is your fourth paragraph</p>
<p> This is your fifth paragraph</p>
</div>
CSS
#parent p:first-child{
color: blue;
text-decoration: underline;
font-size: xx-large;
}
#parent p:nth-child(2){
color: red;
text-decoration: line-through;
font-size: x-large;
}
#parent p:nth-child(3){
color: green;
text-decoration: overline;
font-size: larger;
}
#parent p:nth-child(4){
color: purple;
text-decoration: none;
font-size: larger;
}
#parent p:last-child{
color: orange;
text-decoration: blink;
font-size: large;
}
REFERENCE THE CSS IN THE HTML FILE, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, THE RESULT WILL LOOK LIKE THIS
2. Pseudo Elements
In CSS, pseudo-elements are mainly used for the purpose of selecting a specific part of a text in a document tree. Pseudo-element, unlike pseudo-class, often start with a double colon (::). Generally, there are about five basic pseudo-elements in the cascading style sheet. They include:
a) ::first-line: it is used if one wants to select the first line of text in a paragraph.
b) ::first-letter: it is used to select the first letter of text in a sentence
c) ::before: it inserts some contents before an element.
d) ::after: it inserts some contents before an element.
e) ::selection: It highlights a portion of an element in a paragraph selected by the user. This means that when a visitor of a website tries to select a particular group of words, the color will change to the one defined by a web designer using ''::selection'' element.
Example, write the following codes below;
HTML
<body>
<p> CSS, an acronym for Cascading Style Sheet is a style sheet language written or attached to Hypertext Markup language. The first word Cascading in the acronym refers to a way CSS applies one style on top of another. The last part of the acronym Style Sheet, on the other hand, is used to control the look and feel of a web document. </p>
</body>
CSS
p::selection{
background-color: red;
color: white;
}
REFERENCE THE CSS IN THE HTML DOCUMENT
SAVE AND OPEN IT. THEN TRY SELECTING OR HIGHLIGHTING SOME WORDS
WRAPPING UP
You can try different elements such as the first letter, first line, and so on, to see how they work. Practice is also the soul of self-improvement. So I urge you to keep practicing. Our next lesson lays its weight on transitions.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment