More Selectors

So far CSS has been limiting, though here are a few things which break this boundary. ##Classes and IDs Using the `class` and `id` attributes on elements, we can select specific elements rather than a single type. This is how you can do it. ```html <h1 id="mytitle">Title</h1> <p id="first" class="paragraph">P1</p> <p class="paragraph small">P2</p> ``` ```css #mytitle { /* Selects any element with the id of 'mytitle'. */ color: gold; } p#first.paragraph { /* Selects every paragraph element with the id of 'first' and class of 'paragraph'. */ color: red; } p.paragraph { /* Selects every paragraph element with the class of 'paragraph'. */ color: blue; } p.small { /* Selects any paragraph element with the class of 'small'. */ font-size: 10px; } ``` ##Precedence The general rule of thumb is anything lower in the file will have precedence to anything above it. A more specific selection (i.e. `p.paragraph` over `.paragraph`) will have precedence. IDs have precedence over classes and specific selections. (i.e. `#first` over `p.paragraph`) `!important` will always override anything that isn't tagged with `!important`. Using the above example: ```css #first { color: green; } p { color: purple !important; /* Every paragraph element is purple now. */ } ```