CSS Selectors

Q16 — Different types of CSS selectors?

Universal *, Type p, Class .class, ID #id, Attribute [attr=value], Pseudo-classes, Pseudo-elements, Combinators.

Q17 — What are attribute selectors?

input[type="text"] { color: blue; }

Q18 — Difference between nth-child() and nth-of-type()?

➡ nth-child: based on position among siblings.
➡ nth-of-type: based on position among same type.

Q19 — Difference between child (>) and descendant (space) selectors?

▶ div > p: only direct children.
▶ div p: all nested.

Q20 — Difference between adjacent sibling (+) and general sibling (~) selectors?

➡ h1 + p: first <p> after <h1>.
➡ h1 ~ p: all <p> after <h1>.

Q21 — Difference between pseudo-class :first-child and :first-of-type?

▶ :first-child: first child of parent regardless of type.
▶ :first-of-type: first element of its type.

Q22 — Difference between :nth-child(odd) and :nth-of-type(odd)?

➡ nth-child(odd): odd children regardless of tag.
➡ nth-of-type(odd): odd elements of same tag.

Q23 — What is :not() selector?

p:not(.highlight) { color: gray; }

Q24 — Difference between pseudo-class :hover and pseudo-element ::before?

▶ :hover: triggered on mouse hover.
▶ ::before: adds content before element.

Q25 — What is specificity hierarchy in CSS selectors?

-- Inline (1000) > ID (100) > Class (10) > Element (1).

Q26 — Explain universal selector * in CSS.

* {
  margin: 0;
  padding: 0;
}

Q27 — Difference between :checked, :disabled, and :enabled selectors?

➡ :checked: for checked inputs.
➡ :disabled: for disabled inputs.
➡ :enabled: for enabled inputs.

Q28 — Explain :focus-within.

Applied when an element or its descendants have focus.

Q29 — Difference between :root and html selectors?

▶ :root: highest-level element, useful for CSS variables.
▶ html: same as root, but :root has higher specificity.

Q30 — Difference between :link, :visited, :hover, and :active?

➡ :link → unvisited links.
➡ :visited → visited links.
➡ :hover → mouse hover.
➡ :active → when clicked.

⬅ Home