Selectors
CSS Selectors
Type Selector
Any HTML element can be a type selector. This is global as any CSS applied to a particular element would be applied to all occurances of that element. This is known as a type selector.
Class Selector
Unlike an id, a class can be applied to many occurances of a particular element. We say the element belongs to that class. This is known as a class selector. For example, the class highlight has been used several times and a selector would select all of the elements with a class value, highlight allowing for a common set of CSS rules to be applied to the whole selection of elements.
Id Selector
For example, the section id="combine_selector" element can be uniquely selected as it's id has a uniques value, combine_selector. This is known as an id selector. This unique value, combine_selector can be used as an address in a hyperlink, or a selctor for CSS styling or applying Javascript behaviour.
Psuedo Selector
Pseudo selectors can be used with type, id or class selectors; .highlight:hover is an example of a pseudo-class selector.
Combine Selector
Selectors can also be combined, for example
footer > h1 selects only the h1 element that is the child of the footer element.
section.highlight > h1 selects only the h1 element that is the child of the section element that are of class type highlight.
Likewise: div, h1 { color: red; } (this selects all div and h1 elements, whereas div h1 { color: red; } (without the comma) selects only the h1 within a div element.) This is known as combination selector based on the DOM relationship.
Example Paragraph
This is example paragraph.