Day 2: CSS Selectors

Daily Objective

Target HTML elements accurately using simple, combinator, and grouped selectors.

1. Selector Types

• Universal (*): Matches every element.
• Type / Element (p, h1): Matches tags by element name.
• Class (.card): Matches elements having a specific class name.
• ID (#header): Matches the single element with a matching id.
• Descendant (nav a): Matches <a> anywhere inside <nav>.
• Direct Child (ul > li): Matches <li> directly nested under <ul>.
• Grouped (h1, h2, h3): Applies the same styles to multiple selectors.

/* Universal */
* { box-sizing: border-box; }

/* Grouped */
h1, h2, h3 { font-family: 'Poppins', sans-serif; }

/* Combinators */
nav > ul > li { display: inline-block; }
article p { line-height: 1.7; }

Daily Hands-on Practice (70%)

1. Practice selector targeting by playing CSS Diner up to level 15.
2. Apply class, direct child, and descendant selectors in your own project.