DEV Community

Cover image for Target elements without classes
Colt Borg
Colt Borg

Posted on • Originally published at coltborg.com on

2 2

Target elements without classes

Why did I need to target classless elements?

In making this blog site, I want to style content that comes from markdown files. I found a nice trick to apply styles to the elements that don’t have any classes one them—aka coming from the markdown content.

I can do this by combining the not() and attribute selectors. For example, if I want to target any paragraph without a class, it would look like this:

p:not([class]) {
  margin: 1rem 0;
}

Why :not()

:not() is a negation pseudo-class. So whatever you put in it, it will look for things that are not that thing.

Your best friend Attribute Selectors

Attribute selectors are really powerful. They can check for a whole bunch of different things. But in this case, we can use them to detect if class is placed on the element. In this case we don't care which or how many classes are used.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay