CSS uses selectors to determine the element or elements to which a rule will be applied. There are three types of CSS selectors.
- HTML Element Selectors
- Identifier Selectors
- Class Selectors
1. Selecting HTML Elements
Any HTML element can be the target of a selector. You simply use the element name, with no brackets around it.
The name of the element, div, is followed by a brace. This indicates that the rule is beginning. Within the opening and corresponding closing brace, the property, font-weight, is selected, followed by a colon (:). The value is then set to bold. The line is terminated with a semicolon (;). This semicolon tells the browser that the line is done; in other words, the property/value pair are closed.
2. Selecting Individual Elements
When you want to target only one element on a page, you can use id selector. The id (short for identifier) enables you to select one and only one element within a page. To do so, you need to modify the HTML to add an id attribute and provide a name for that element. For example, if you want to make the text bold:
<div id="BoldText">This text is bold</div>
The id is value is set to BoldText.
To select this id within the CSS, you use a pound sign or hash character (#)
Always match the case that you use in the HTML with the case that you use in the CSS. If you use all uppercase to name the ID in the HTML, then use all uppercase in the CSS. If you use all lowercase in the HTML, use lowercase in the CSS. If you use a combination, then match that combination in the CSS.
When using IDs in HTML, you can use it once and only once across an entire page. You can use the same ID in different pages, but the ID should appear only once within a page. If you need to apply the same style to more than one element, then use classes.
3. CSS Class Selectors
A CSS class is used to select multiple elements and apply a style to them. A CSS class is applied only to the specific elements that you choose.
<div class="boldText">This text is bold</div>
An ID selector uses a hash sign (#) in the CSS and a class uses a single period or dot.
/* CSS Goes Here */
You can use a class in the HTML to target only those elements that you want to target.
4. CSS3 Selectors
With CSS3, you can target almost any element on the page with a wide range of selectors.
4.1 Relational Selectors
Relational selectors target elements based on their relationship to another element within the markup.
Descendant (E F)
The descendant selector targets any element F that is a descendant (child, grandchild, great grandchild, and so on) of an element E. For example, ol li targets li elements that are inside ordered lists. This would include li elements in a ul that is nested in an ol.
Child (E > F)
This selector matches any element F that is a direct child of element E. Any further nested elements will be ignored. For example, ol > li would only target li elements directly inside the ol, and would omit those nested inside a ul.
Adjacent Sibling (E + F)
This will match any element F that shares the same parent as E, and comes directly after E in the markup. For example, li + li will target all li elements except the first li in a given container.
General Sibling (E ~ F)
It will match any element F that shares the same parent as any E and comes after it in the markup. So, h1~h2 will match any h2 that follows an h1, as long as they both share the same direct parent, that is, as long as the h2 is not nested in any other element.
4.2 Attribute Selectors
CSS2 introduced several attribute selectors. These allow for matching elements based on their attributes. CSS3 expands upon those attribute selectors, allowing for some targeting based on pattern matching.
Matches any element E that has the attribute attr with any value.
Matches any element E that has the attribute attr with the exact, case-insensitive value val. It is helpful in targeting form input types - for instance, target checkboxes with input[type=checkbox].
Matches any element E whose attribute attr either has the value val or begins with val-. This is most commonly used for the lang attribute. For example, p[lang|="en"] would match any paragraph that has been defined as being in English, whether it be UK or US English.
Matches any element E whose attribute attr has within its value the full word val, surrounded by whitespace. For example, .info[title~=more] would match any element with the class info that had a title attribute containing the word "more", such as "Click here for more information".