Top 20 CSS Selectors Interview Questions Answers

Learn and master the Top 20 CSS Selectors interview questions and answers often asked in interviews.

1. What are CSS Selectors?
   CSS Selectors are patterns used to select and target specific HTML elements on a web page, allowing you to apply styles or perform actions on those elements.
   
2. What is the difference between class and ID selectors in CSS?
   Class selectors are denoted by a dot (.) followed by the class name, while ID selectors are denoted by a hash (#) followed by the ID name.
   
   Class selectors can be applied to multiple elements, while ID selectors should be unique within the document.

/* Class Selector */
.example-class {
  color: blue;
}

/* ID Selector */
#example-id {
  color: red;
}

3. How do you select an element by its tag name in CSS?
   To select elements by their tag name, simply use the tag name as the selector.

/* Select all <p> elements */
p {
  color: green;
}

4. How do you select an element by its class name in CSS?
   To select elements by their class name, use the dot (.) followed by the class name as the selector.

/* Select all elements with class "example" */
.example {
  font-weight: bold;
}

5. How do you select an element by its ID in CSS?
   To select an element by its ID, use the hash (#) followed by the ID name as the selector.

/* Select the element with ID "example" */
#example {
  background-color: yellow;
}

6. What is the difference between the descendant selector and the child selector in CSS?
   The descendant selector (space) selects all matching elements that are descendants of a specified parent, while the child selector (>) selects only the direct children of the specified parent.

/* Descendant Selector */
.parent span {
  color: red;
}

/* Child Selector */
.parent > span {
  color: blue;
}

7. How do you select the first child element of a parent using CSS?
   To select the first child element of a parent, you can use the :first-child pseudo-class.

/* Select the first <li> element within a <ul> */
ul li:first-child {
  font-weight: bold;
}

8. How do you select the last child element of a parent using CSS?
   To select the last child element of a parent, you can use the :last-child pseudo-class.

/* Select the last <p> element within a <div> */
div p:last-child {
  color: red;
}

9. How do you select even or odd elements using CSS?
   To select even or odd elements, you can use the :nth-child pseudo-class with the even or odd keyword.

/* Select even <li> elements */
li:nth-child(even) {
  background-color: #f2f2f2;
}

/* Select odd <p> elements */
p:nth-child(odd) {
  color: blue;
}

10. How do you select elements with a specific attribute using CSS?
    To select elements with a specific attribute, use square brackets ([]) and specify the attribute name and value.

/* Select all <a> elements with a "target" attribute */
a[target] {
  color: red;
}

11. How do you select elements with a specific attribute value using CSS?
    To select elements with a specific attribute value, use square brackets ([]) and specify the attribute name and value.

/* Select all <input> elements

 with type="text" */
input[type="text"] {
  border: 1px solid black;
}

12. How do you select elements with a specific attribute value starting with a certain string using CSS?
    To select elements with a specific attribute value that starts with a certain string, use the ^= operator within the attribute selector.

/* Select all <a> elements with href starting with "https://" */
a[href^="https://"] {
  color: green;
}

13. How do you select elements with a specific attribute value ending with a certain string using CSS?
    To select elements with a specific attribute value that ends with a certain string, use the $= operator within the attribute selector.

/* Select all <img> elements with src ending with ".png" */
img[src$=".png"] {
  border: 2px solid black;
}

14. How do you select elements with a specific attribute value containing a certain string using CSS?
    To select elements with a specific attribute value that contains a certain string, use the *= operator within the attribute selector.

/* Select all <input> elements with name containing "email" */
input[name*="email"] {
  background-color: lightblue;
}

15. How do you select elements that are empty using CSS?
    To select elements that are empty, use the :empty pseudo-class.

/* Select all empty <div> elements */
div:empty {
  border: 1px dashed gray;
}

16. How do you select elements based on their state using CSS?
    To select elements based on their state, use the pseudo-classes such as :hover, :active, :focus, etc.

/* Select all <button> elements on hover */
button:hover {
  background-color: yellow;
}

/* Select all <input> elements in focus */
input:focus {
  border: 1px solid blue;
}

17. How do you select elements based on their position in the hierarchy using CSS?
    To select elements based on their position in the hierarchy, you can use pseudo-classes like :first-child, :last-child, :nth-child, etc., to target specific elements based on their position relative to their siblings.
    
18. How do you select elements that are adjacent to another element using CSS?
    To select elements that are directly adjacent to another element, use the adjacent sibling selector (+).

/* Select the <span> element immediately after a <p> element */
p + span {
  font-weight: bold;
}

19. How do you select elements that come after another element using CSS?
    To select elements that come after another element, use the general sibling selector (~).

/* Select all <p> elements that come after a <div> element */
div ~ p {
  color: gray;
}

20. How do you select the first letter or line of an element using CSS?
    To select the first letter or line of an element, you can use the ::first-letter and ::first-line pseudo-elements.

/* Select the first letter of a <p> element */
p::first-letter {
  font-size: 24px;
  color: red;
}

/* Select the first line of a <p> element */
p::first-line {
  font-weight: bold;
}

Understanding CSS Selectors is essential for targeting and styling specific elements on a web page effectively.