Speckyboy RSS: How to Target Design Elements with the CSS :not Pseudo-Class

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

How to Target Design Elements with the CSS :not Pseudo-Class


By Eric Karkovack on May 31, 2021 07:43 pm


Consistency is good practice in all areas of web design. On the front end, it makes for a better user experience. Under the hood, maintenance becomes more efficient.

Yet there are times when a specific part of a design doesn’t quite fit the mold. It may be a one-off design feature that is utilized on a single page or area of a site. For example, home pages often include elements that don’t carry over to secondary pages. Individual blog posts might also require a certain formatting of their own.

The trouble is that the HTML markup may be same throughout the website. Think of a WordPress theme that has the same structure for every page. How can you target only specific instances of an element?

This is where the CSS :not pseudo-class comes in handy. It allows you to target elements that do not match a list of provided selectors. The result is more fine-grain control over those niche design features.

Let’s take a look at a few scenarios that demonstrate the power of :not.

Full-Width Content on the Home Page

In our first example, let’s consider a home page that is going to use full-width content. Perhaps it has a lot of content and a wide layout would take advantage of large screens. However, that’s the only place we want to add this style for now.

We’ll also assume that we’re adding a CSS class of .home somewhere on the page, while secondary pages get their own class of .secondary-page.

The goal is to adjust the width of the #content element only for pages that don’t include the .home class.

This allows us to implement full-width content on the home page, while keeping it at 66% wide everywhere else. So, even if a page has a class other than .secondary-content, that rule still holds true.

Here’s how it looks in practice:

See the Pen CSS :not – Full-width content for a home page by Eric Karkovack (@karks88)
on CodePen.

Remove Text Decoration on Hyperlinks Outside the Content Area

Underlining hyperlinks is helpful for accessibility. However, there may be places within a website where you don’t necessarily want this visual enhancement. Navigation bars and even footers might eschew underlined links altogether.

In this scenario, we’ll underline links – but only within the #content element. Every other area of our fictional page will forego them.

To accomplish this, we’ll look for child elements of the .container element, which wraps around the entirety of the page. Links that are not within the #content element will have a style of text-decoration: none;.

See the Pen
CSS :not – Underline links within #content
by Eric Karkovack

Change a Text Heading Style When Inside of a Multi-Column Layout

Typography styles are often adjusted for different types of page layouts. You might want to use different font sizes and margins, for example, within a multi-column layout as opposed to a single-column page.

Large text headings could be especially overwhelming when used in smaller spaces. With this example, we’ll adjust <h2> elements to better fit in these situations.

Specifically, the CSS we’ve written assumes that any <h2> elements that aren’t within in a container using the .single_column class should be made smaller. In addition, we’ve changed the color and a few other properties.

See the Pen CSS :not – Different heading styles for multi-column layouts by Eric Karkovack

:not a Bad Way to Control Your CSS

Part of the beauty of CSS is in its flexibility. There are often a number of ways to accomplish a given goal. This allows web designers to work more efficiently than ever.

The :not pseudo-class is yet another helpful tool. You may have looked at the scenarios above and thought of other techniques for doing the very same thing. And there are indeed times when you might want to take a different approach.

But in many cases, :not can increase efficiency. It saves us from individually targeting multiple selectors that require similar styling. And, as previously mentioned, it’s great for those one-off design elements that we want to stand out. Browser support is also very strong.

It should be noted that :not does have some limitations. Also, it requires a bit of background on how the CSS cascade works. Therefore, writing an effective piece of code can take a few tries.

Still, it’s worth learning. Once you get the syntax down, you might be surprised at how truly useful this functionality is.

The post How to Target Design Elements with the CSS :not Pseudo-Class appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

10 Stunning Examples of Text Distortion Effects in Web Design
Weekly News for Designers № 594
Inspiring Examples of Brand-Related Splash Screens in Web Design
Getting Past the Limitations of Your Design Skills
Why Web Design Is Never Simple
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: 10 Stunning Examples of Text Distortion Effects in Web Design

Monday, May 31, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration 10 Stunning Examples of Text Distortion Effects in Web Design By Nataly Birch on May 31, 2021

Speckyboy RSS: Weekly News for Designers № 594

Friday, May 28, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 594 By Speckyboy on May 28, 2021 11:03 am Envato Elements daisyUI

Speckyboy RSS: Inspiring Examples of Brand-Related Splash Screens in Web Design

Thursday, May 27, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Inspiring Examples of Brand-Related Splash Screens in Web Design By Nataly Birch on May 27,

Speckyboy RSS: Getting Past the Limitations of Your Design Skills

Wednesday, May 26, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Getting Past the Limitations of Your Design Skills By Addison Duvall on May 26, 2021 06:02 am

Speckyboy RSS: Why Web Design Is Never Simple

Tuesday, May 25, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Why Web Design Is Never Simple By Eric Karkovack on May 25, 2021 06:18 am When watching a

You Might Also Like

NBA Shot Data, Inspirational Websites, Table of Contents, Navigation Redesign, AI Vocabulary

Friday, March 29, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 29 2024 A long read about NBA shot data aweebitofmapping.

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.