Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
classes

5 Articles
{
,

}
Image
Direct link to the article How to Cycle Through Classes on an HTML Element
classes classlist JavaScript

How to Cycle Through Classes on an HTML Element

Say you have three HTML classes, and a DOM element should only have one of them at a time:

<div class="state-1"</div<div class="state-2"</div<div class="state-3"</div

Now your job is to rotate them. That is, cycle through classes …

Image
Chris Coyier on Jan 26, 2022
Image
Direct link to the article Could Grouping HTML Classes Make Them More Readable?
classes HTML selectors semantics

Could Grouping HTML Classes Make Them More Readable?

You can have multiple classes on an HTML element:

<div class="module p-2"></div>

Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:

.module { }
.p-2 { }
const div = document.querySelector("div");
…
Image
Chris Coyier on Apr 22, 2019
Image
Direct link to the article Random Interesting Facts on HTML/SVG usage
accessibility classes data HTML SVG

Random Interesting Facts on HTML/SVG usage

Last time, we saw how the average web page looks like using data from about 8 million websites. That’s a lot of data, and we’ve been continuing to sift through it. We’re back again this time to showcase some …

Image
Catalin Rosu on Nov 25, 2016
Image
Direct link to the article (To use or not-to-use) Classes
bem classes semantics

(To use or not-to-use) Classes

Love me some blog debates! Papa Bear, Mama Bear, Baby Bear.…

Image
Chris Coyier on May 20, 2016
Image
Direct link to the article Templates are easy to change. Content usually isn’t.
classes HTML

Templates are easy to change. Content usually isn’t.

There are two kinds of HTML:

  1. HTML that makes up templates
  2. HTML that is content

I feel like some discussions about HTML are clouded by not making this distinction.…

Image
Chris Coyier on Mar 4, 2016

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement