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, Specificity & Inheritance 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 element selector 'p' is used to target all paragraph elements in the document. It applies the defined style to every <p> tag on the page.
p { color: blue; }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.
An ID selector starts with a hash symbol. '#main' selects the element whose id attribute is set to 'main'. Each ID must be unique on a web page.
#main { background-color: lightgray; }The child selector '>' selects only elements that are direct children of the specified parent. It does not apply to deeper nested elements.
div > p { color: green; }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; }CSS combinators define relationships between selectors. A space indicates descendant, '>' means direct child, '+' selects the next sibling, and '~' selects all following siblings. These help in selecting elements based on their hierarchy in HTML.
div + p { color: red; }CSS provides different types of selectors such as element selectors, class selectors, ID selectors, attribute selectors, and pseudo-class selectors. For example, 'p' selects all paragraphs, '.intro' selects all elements with the class intro, and '#main' selects the element with ID main. Each type helps target elements efficiently for styling.
p, .intro, #main, input[type='text']
An ID selector has higher specificity than class or element selectors. The priority order in CSS is inline styles, then IDs, then classes, then elements.
#box { color: red; } /* overrides */
.box { color: blue; }A class selector begins with a dot. The selector '.intro' selects all elements that have class='intro'. Classes are reusable for multiple elements.
.intro { font-size: 18px; }The selector 'div span' selects every span element that is nested anywhere inside a div, regardless of the depth. It helps style inner elements within containers.
div span { color: red; }CSS specificity decides which rule will be applied when multiple rules target the same element. Inline styles have the highest priority, followed by ID selectors, class selectors, and element selectors. Understanding specificity is important to control style conflicts and maintain consistent design.
#id > .class > p
Inheritance in CSS means some properties are automatically passed from parent elements to their children. For example, text color and font family are inherited, but box-related properties like margin or padding are not. You can use the 'inherit' keyword to force a property to take its parent’s value.
p { color: inherit; }The '!important' rule forces a CSS property to override all others, regardless of specificity. It should be used rarely because it makes the code harder to maintain. Instead, write clean and specific selectors to control priority.
p { color: blue !important; }When CSS rules conflict, you can open the browser’s Developer Tools and inspect the element. The 'Computed' tab shows the final applied styles. The browser uses specificity and the cascade order to determine which rule wins.
/* Use browser DevTools > Computed Styles */
The attribute selector input[type='text'] applies styles to input fields whose type is text. It’s useful for form-specific styling and improving UI consistency.
input[type='text'] { border: 1px solid gray; }