Pseudo-Class: CSS Class Notes

Updated: Aug 18

Mobiprep has created last-minute notes for all topics of Pseudo-Class to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on Pseudo-Class.

  1. Table and Lists

  2. CSS Layout

  3. Pseudo - class

  4. CSS

  5. Selectors and Declarations

  6. Box Model

  7. Text and Image Formatting

  8. Icons, Lists and Links

  9. Colors


Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.

  1. Explain Pseudo class with example.

  2. Explain the hover pseudo class in detail.

  3. Explain CSS Pseudo Elements in detail.

Pseudo-Class


Question 1 - Explain Pseudo class with example.

Answer - A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.


A pseudo-class is used to define a special state of an element. For example, it can be used to:

Style an element when a user mouses over it.

Style visited and unvisited links differently.

Style an element when it gets focus


Syntax-

The syntax of pseudo-classes:

selector:pseudo-class {
property: value;
}

A CSS pseudo-element is a keyword added to a selector that lets you style aspecific part of the selected element(s).

 

Question 2 - Explain the hover pseudo class in detail.

Answer - hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.

Example-

div:hover {
background-color:blue;
}
Hover over a <div> element to show a <p> element (like a tooltip):
):p {
display: none;
background-color:yellow;
padding: 20px;
}
div:hover p {
display: block;
}

 

Question 3- Explain CSS Pseudo Elements in detail.

Answer - pseudo-element is used to style specified parts of an element.


For example, it can be used to:

Style the first letter, or line, of an element.

Insert content before, or after, the content of an element

Syntax-

The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}

The ::first-line Pseudo-element-

The ::first-line pseudo-element is used to add a special style to the first line of a text.


The following example formats the first line of the text in all <p> elements:


Example

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

The following properties apply to the ::first-line pseudo-element:

  1. font properties

  2. color properties

  3. background properties word-spacing

  4. letter-spacing

  5. text-decoration

  6. vertical-align

  7. text-transform

  8. line-height clear

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.


The following example formats the first letter of the text in all <p> elements:

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

The following properties apply to the ::first-letter pseudo- element:

  1. font properties

  2. color properties

  3. background properties

  4. margin properties

  5. padding properties

  6. border properties

  7. text-decoration

  8. vertical-align (only if &quot;float&quot; is &quot;none&quot;)

  9. text-transform

  10. line-height

  11. float

  12. clear


CSS -The ::before Pseudo-element-


The ::before pseudo-element can be used to insert some content before the content of an element.


CSS - The ::after Pseudo-element-


The ::after pseudo-element can be used to insert some content after the content of an element.


CSS - The ::selection Pseudo element-


The ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection: color, background, cursor, and outline.




2 views0 comments

Recent Posts

See All