A CSS selector is the part of a CSS rule that names the HTML element or design element to style. It comes before curly braces, followed by property/value pairs such as color or font size. An element name like h1 can be a selector, and a class name can be one too. section 7.2 section 7.3
Use lowercase consistently in HTML and CSS names. Case differences can make apparently similar names into different selectors, causing a style not to apply as expected. section 7.2
Reuse a class style
A class selector lets one style serve many elements. Define a class such as .greensans once, then add class="greensans" to headings or paragraphs. Later changes to the class definition update every element using that class, avoiding repeated inline style attributes. section 7.6
Try selectors in a practical website-editing workflow:
- Add a class rule in Appearance > Customize > Additional CSS, then publish it. section 7.6
- Add the class name to the relevant page HTML, update the page, and view the result. section 7.6
- Use the browser Inspector to select an element and read the rules applied to it, including rules overridden lower in the cascade. section 7.3
- Live-edit, disable, or add rules in the Inspector to test visual changes; these experiments do not permanently change the stylesheet. section 7.3
.greensans {
color: green;
font-family: sans-serif;
}
This class rule shows a selector beginning with a dot and the reusable color and font declarations it controls. section 7.6
Finding a selector for a date stamp
To hide a post date, select the date in YellowPencil, open its CSS Editor with E, and copy the generated selector into Additional CSS. Selector words vary by site, so use the selector shown for the actual date element rather than assuming an example will match. section 9.5
