Pseudo Selector - O Level (NIELIT)

In CSS, pseudo-selectors (or pseudo-classes and pseudo-elements) are used to style specific parts of elements or elements in particular states. They help in applying styles dynamically without needing to modify the HTML structure.

Pseudo-Classes (:)

Pseudo-classes target elements based on their state, position, or user interaction.

Pseudo-Class	Description
`:hover`	Applies styles when the user hovers over an element.
`:focus`	Styles an element when it gains focus (e.g., an input field).
`:nth-child(n)`	Selects the nth child of a parent element.
`:first-child`	Targets the first child of a parent.
`:last-child`	Targets the last child of a parent.
`:checked`	Styles checkboxes or radio buttons that are checked.
`:disabled`	Targets disabled form elements.
`:not(selector)`	Excludes elements that match a specific selector.

Example:

button:hover {
  background-color: blue;
  color: white;
}

Pseudo-Elements (::)

Pseudo-elements target specific parts of an element.

Pseudo-Element	Description
`::before`	Inserts content before an element.
`::after`	Inserts content after an element.
`::first-letter`	Styles the first letter of a text block.
`::first-line`	Styles the first line of a paragraph.
`::selection`	Styles text when selected.

Example:

p::first-letter {
  font-size: 2rem;
  color: red;
}
p::after {
  content: " ✨";
}

Qus. 1 : Which of the following selector selects the elements that are the default among a set of similar elements?

:default
:%
:disabled
None of these

Qus. 2 : Which of the following selector selects the elements that are currently enabled?

:element
:empty
:enabled
None of these

Qus. 3 : How to apply specific styles to h1 tag only when mouse points to it?

h1.hover
h1*hover
h1:hover
h1-hover

Qus. 4 : Which selector selects elements based on a certain state ?

Combinator selector
Pseudo Class selector
Pseudo elements selector
Attribute selector

Qus. 5 : The pseudoclass is activated when the user moves the mouse cursor over the specified element.

mouse over
mouse hover
hover
mouse move

Qus. 6 : Which of the following selector applied styles to elements that are valid per HTML5 validations set either with the pattern or type attributes ?

:valid
:required
:optional
:invalid

Qus. 7 : Which of the following selector selects the element that is the target of a referring URI?

:target
:selection
::selection
URO

Qus. 8 : Which pseudo-class targets an input field while it is being typed in

focus
hover
active
checked

Qus. 9 : How do you target the last child of a parent element

:nth-child(last)
:last-child
:only-child
:nth-last-child(1)

Qus. 10 : How do you apply styles to all <input> elements that are checked

input:checked
input:focus
input:hover
input:active

Qus. 11 : Which selector applies styles to all elements inside a <div> with the class .content

content p
p.content
.content > p
p .content

Qus. 12 : Match the CSS User Action Pseudo-Class with Its Effect <table class="table table-bordered"><tbody><tr><td>CSS Pseudo-Class</td><td>Effect</td></tr><tr><td>A. :hover</td><td>1. Styles an element when the mouse leaves it</td></tr><tr><td>B. :focus</td><td>2. Applies a style when an element is clicked or focused</td></tr><tr><td>C. :active</td><td>3. Applies a style when an element is actively being clicked</td></tr><tr><td>D. :visited</td><td>4. Styles a link that has been previously clicked (visited)</td></tr><tr><td> </td><td>5. Styles an element only when it is visible on the screen</td></tr><tr><td> </td><td>6. Applies a style when an element is hovered over</td></tr></tbody></table>

A → 4, B → 3, C → 2, D → 1
A →5, B → 4, C → 3, D → 2
A → 6, B → 2, C → 3, D → 4
A → 5, B → 2, C → 3, D → 6

Programs

HTML code using CSS to create a job application

View Solution