A type selector targets HTML elements by their element name. Write the name at the start of a CSS rule: `h1 { color: crimson; }` targets every `<h1>` element. You do not need to add an attribute to the HTML first. section 1.6.1
Change all heading colors
To color every heading level, group the type selectors with commas: `h1, h2, h3, h4, h5, h6 { color: crimson; }`. The rule makes its reach easy to see: it targets headings from `<h1>` through `<h6>`. section 1.6.1
A type selector can also be part of a more selective rule. In `input:not([type="radio"], [type="checkbox"])`, `input` selects by element name; `:not()` and the attribute selectors exclude radio buttons and checkboxes. This lets you style the remaining inputs without adding a class to each one. section 10.3.1
Listing 10.4 Styling input fields that aren’t of type radio or checkbox
input:not([type="radio"], [type="checkbox"]) {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none; #1
border-bottom: solid 1px var(--primary); #2
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1; #3
padding: 0 0 .25rem;
width: 100%;
}
See the complete rule for styling those inputs, including readable font sizing, inherited text styles, padding, and a gradient border. section 10.3.1
Keep specificity in mind when another rule targets the same element: a type selector contributes 1 to specificity, compared with 10 for a class selector, attribute selector, or pseudo-class, and 100 for an ID selector. section 1.5
