Loading...
Loading...
Target elements with classes, IDs, pseudo-classes, and advanced selectors
h1 { color: blue; } /* Tag selector - targets ALL h1 elements */
.highlight { color: red; } /* Class selector - targets elements with class="highlight" */
#logo { width: 100px; } /* ID selector - targets the element with id="logo" */a:link { color: blue; } /* Unvisited link */
a:visited { color: purple; } /* Visited link */
a:hover { color: red; } /* Mouse hovering */
a:active { color: orange; } /* Being clicked */
li:first-child { font-weight: bold; }
li:last-child { border: none; }
li:nth-child(odd) { background: #f5f5f5; }| Wrong | Why | Right |
|---|---|---|
| Overusing `!important` | Breaks cascade rules | Fix specificity instead |
| Using IDs for styling | Too specific - hard to override | Use classes for reusable styles |
Style a list where first-child is bold, last-child is gray, odd items have light gray background.