HTML - The class attribute

About

The class attribute is a global attribute (ie Every HTML element may have a class attribute specified) that permits to (select|categorize) elements.

Assigning classes to an element affects:

Value

The value is a set of space-separated tokens called name representing the various classes that the element belongs to.

<div class='firstclass secondclass'/>

Name

A name is any string of one or more characters, none of which are space characters.

Authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

  • Keep classes lowercase and use dashes (not underscores or camelCase). Dashes serve as natural breaks in related class (e.g., .btn and .btn-danger).
  • Avoid excessive and arbitrary shorthand notation. .btn is useful for button, but .s doesn't mean anything.
  • Keep classes as short and succinct as possible.
  • Use meaningful names; use structural or purposeful names over presentational.
  • Prefix classes based on the closest parent or base class.
  • Use .js-* classes to denote behavior (as opposed to style), but keep these classes out of your CSS.

Management

Add / Delete / Modify (DOM Operations)

To manipulate the class attribute with script, see DOM - Class attribute

Join

Css: If a class is not present

Example with the logical pseudo-element: if the class fade is present but not the class show, the opacity will be set a 0.

.fade:not(.show) {
    opacity: 0;
}

Library

  • CLSx to create class name conditionally

Documentation / Reference





Discover More
Color Autocompletion List
Bootstrap - AutoCompletion with DropDown

This page shows how to create a autocompletion box with the dropdown component of Bootstrap. This is an adaptation of the autocompletion box code to the Bootstrap styling. You need to know the...
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Framework

A css framework is a collection of css rule generally based on class that make page layout easy to implement. See bootstrap.
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Selector

in the CSS context. When a user agent can't parse the selector (i.e., it is not valid CSS), it ignores the declaration block. The whole statement is ignored if there is an error anywhere in the selector....
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
HTML - Attribute

HTML An attribute in HTML is an XML attribute of an HTML element Attribute names are TR/html-markup/documents.htmlcase-insensitive. Classes and IDs are attributes used in the selection of element....
HTML - Global (Element) Attribute

The global-attributesglobal attributes are common attribute to all elements in the HTML language.
Chrome Devtool Selector
How to select elements based on attribute ? (with the css selector API)

How to select elements based on attribute ? (with the selector API , css) API This page is about selector expressions that select elements based on attribute. * An ID selector and a class selector...



Share this page:
Follow us:
Task Runner