Various Selectors
A Selector can define up to five different criteria for choosing the elements that should be formatted:
- The type or name of the element (p or h1)
- The context in which the element is found (ul li) (this is making the selection more specific)
- The class or id of an element (.hugetext or #content)
- The pseudo-class of an element or a pseudo-element itself (a:link)ID Selector
There are only unique ID’s within a HTML document. You custom name the ID and it only appears once in the HTML. It’s common to mark sections of a document. For example, #masthead, #navlinks, #sidebar.
You can also add an element and an ID to be more specific. For example #sidebar p. An ID selector in CSS is identified by a “#” and it is selecting a “<div id>” tag in HTML.
For example, #masthead selects <div id=”masthead”>Masthead</div>
Class Selector
Can have more than one instance throughout a document. You can use them to collect elements into sets. For example, things that are first or all links that link to more specific things or different sets of images. It can be tempting to over-class. It is harder to read and slows things down. Use them when necessary. A Class selector in CSS is identified by a “.” and it is selecting a “<div class>” tag in HTML.
For example, .hugetext selects <div class=”hugetext”>First Word</div>
Grouped Selectors
You can group selectors together if you want to do the same style to multiple elements. It is cleaner and faster. For example, h1,h2, h3, h4, h5, h6