InternshipSelectors
Pick exactly the elements you want by tag, class, id, position or state.
Most CSS bugs are selector bugs: the rule is fine, but it is not reaching the element you meant.
| Selector | Picks |
|---|---|
p | Every <p> |
.card | Every element with class="card" |
#menu | The one element with id="menu" |
nav a | Any <a> anywhere inside a <nav> |
ul > li | Only <li> directly inside a <ul> |
a:hover | A link while the pointer is over it |
li:first-child | An <li> that is the first child of its parent |
input[type="email"] | Inputs whose type attribute is email |
Which rule wins?
When two rules set the same property, the more specific selector wins: an id beats a class, and a class beats a tag. If they are equal, the later rule wins. Reach for classes first, as they are specific enough without being hard to override.
Edit the CSS
Preview