Difference between revisions of "Class selector (CSS)"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) (Created page with "In CSS, a '''class rule''' (or '''class style rule''', or '''class style''') is a style rule which selects zero or more HTML elements based on the ele...") |
Karl Jones (Talk | contribs) |
||
| Line 1: | Line 1: | ||
In [[CSS]], a '''class rule''' (or '''class style rule''', or '''class style''') is a [[style rule]] which selects zero or more [[HTML element|HTML elements]] based on the elements' [[Class attribute (HTML)|class attribute]]. | In [[CSS]], a '''class rule''' (or '''class style rule''', or '''class style''') is a [[style rule]] which selects zero or more [[HTML element|HTML elements]] based on the elements' [[Class attribute (HTML)|class attribute]]. | ||
| + | |||
| + | == Example == | ||
| + | |||
| + | Class style rule: | ||
| + | |||
| + | <pre>.example { color: red; }</pre> | ||
| + | |||
| + | Note the period (.) which indicates that this is a class style rule. | ||
| + | |||
| + | Element affected by rule: | ||
| + | |||
| + | <pre> | ||
| + | <div class="example">...</div> | ||
| + | <p class="example">...</p> | ||
| + | </pre> | ||
| + | |||
| + | The above example demonstrates that a class rule can affect two or more HTML elements, and that the elements can be different types. | ||
| + | |||
| + | * This is somewhat artificial, as a classroom example | ||
| + | * More commonly, a class rule affects HTML elements of the same type | ||
| + | |||
| + | == Example: multiple class rules == | ||
| + | |||
| + | ... | ||
== See also == | == See also == | ||
Revision as of 11:16, 9 February 2016
In CSS, a class rule (or class style rule, or class style) is a style rule which selects zero or more HTML elements based on the elements' class attribute.
Example
Class style rule:
.example { color: red; }
Note the period (.) which indicates that this is a class style rule.
Element affected by rule:
<div class="example">...</div> <p class="example">...</p>
The above example demonstrates that a class rule can affect two or more HTML elements, and that the elements can be different types.
- This is somewhat artificial, as a classroom example
- More commonly, a class rule affects HTML elements of the same type
Example: multiple class rules
...
