Class selector

As explained in Tiny CSS Projects

A class selector is a CSS selector that matches elements having a specified class value.

A class selector matches every HTML element carrying a specified class value. Add the class with the class attribute, then reuse one CSS rule across as many elements as needed. section 1.6.1

Use class selectors effectively by following these practical rules:

• Separate multiple class values in the class attribute with spaces, allowing one element to receive several reusable style groups. section 1.6.1
• Choose names that describe the element or role clearly; avoid vague names such as text or names tied to a temporary color. section 1.6.1
• Remember that class selectors contribute a specificity value of 10, exceeding type selectors but falling below ID selectors. section 1.5

Styling both sides of a credit card

A virtual credit card uses the shared class card-item__side on its front and back. A rule for that class handles common styling, while .front and .back add side-specific styles. This combination keeps shared declarations together without losing control of each side. section 9.2

Figure 1.12 Class selector applied to elements that have the class name small-heading

View the figure showing a class selector applied to elements carrying the small-heading class. section 1.6.1

How Tiny CSS Projects covers it

How deep it goes

Explains class attributes, naming, reuse, specificity, and a shared-versus-specific card layout, stopping short of selector internals.

Examples

Uses small-heading elements and the front-and-back sides of a virtual credit card as concrete class-selector examples.

What you can do after

Apply shared and side-specific CSS styles while choosing maintainable class names and anticipating specificity conflicts.

How it connects

Connects class selectors to type selectors, ID selectors, attribute selectors, pseudo-classes, specificity, BEM, and SMACSS.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  CSS in Depth, Second EditionA CSS class selector matches elements whose class attribute contains a specified class name.

Compare how 2 books explain class selector →

Related concepts

• CSS selectorkind of · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
• ID selectorcontrasts with · An ID selector is a CSS selector that matches an element by the value of its id attribute.
• CSS classuses · A name assigned to one or more document elements through a class attribute, allowing CSS selectors to match them and apply shared style declarations.
• pseudo-classequivalent to · A CSS pseudo-class is a selector construct that matches elements according to a state, condition, or structural relationship.
• specificitymeasures · CSS specificity is the priority assigned to a selector that helps determine which matching declaration takes precedence in the cascade when styles conflict.
• descendant selectorcontrasts with · A descendant selector is a CSS selector relationship that matches elements nested at any depth within an element matched by another selector.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.