Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
Selectors & Pseudo-classes interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
The universal selector '*' matches every element on the page. It’s often used to reset margins, padding, or apply base styles globally.
* { margin: 0; padding: 0; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.
Combinators define relationships between selectors. The main ones are: space (descendant), '>' (child), '+' (adjacent sibling), and '~' (general sibling). They help target elements precisely based on their structural relation.
.parent > .child, h2 + p, h2 ~ ul
The period (.) symbol targets class names. '.btn' selects all elements having the class 'btn'. '#' is used for IDs, and '*' selects all elements.
.btn { color: white; background: blue; }Important form pseudo-classes include `:focus` (input active), `:required` (must be filled), `:valid` and `:invalid` (validation state). These allow styling feedback directly through CSS without JavaScript.
input:focus { border-color: blue; } input:invalid { border-color: red; }An ID selector uses a hash (#). The rule '#header{}' styles the element with that specific ID. Each ID should be unique within a page.
#header { background-color: #333; }The child selector (>) matches only the **direct** children of an element, not deeper descendants.
.menu > li { padding: 10px; }Specificity is calculated as ID > Class > Element. '#main p' includes an ID, giving it higher specificity than class or element selectors.
#main p { color: red; }`:hover` triggers when the user points to an element (commonly used for interactive buttons). Example: `.btn:hover { background: #0066cc; }`.
.btn:hover { background-color: darkblue; }`::before` is the correct modern syntax (double colon) for inserting generated content before an element. It requires `content:` property to work.
h1::before { content: '👉 '; color: orange; }Specificity determines which CSS rule wins when multiple rules target the same element. The hierarchy is: Inline styles (highest), IDs, Classes/Attributes/Pseudo-classes, and then Elements/Pseudo-elements. A rule with an ID selector overrides one with only classes or tags.
#id (100 points) > .class (10 points) > element (1 point)
Pseudo-classes represent a state (like :hover or :focus), while pseudo-elements create virtual elements (like ::before or ::after). Pseudo-classes modify existing elements based on interaction, pseudo-elements insert new content for styling.
a:hover{} /* state */ p::first-line{} /* virtual part */The browser applies the rule with higher specificity. If equal, the later one in the CSS file wins. You can inspect elements in DevTools to see which rules are crossed out or overridden.
/* Example */ #title {color:red;} .heading {color:blue;} /* red wins */A descendant selector selects all matching elements inside a parent, regardless of depth. '.card p' applies to all <p> within .card at any level.
.card p { color: gray; }Touch devices don’t have a traditional hover state. The first tap often triggers :hover but may not persist. Instead, use :active or JavaScript touch events for responsive feedback, or provide clear visual focus states.
button:active { background: #333; }