Dalelorenzo's GDI Blog

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

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

Yet there are times when a specific part of a blueprint doesn’t quite fit the mildew. It may be a one-off design feature that is utilized on a single page or expanse of a site. For instance, home pages often include components that don’t carry over to secondary pages. Individual blog announces 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 are you able 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 index of accommodated selectors. The reaction is more fine-grain control over those niche designing features.

Let’s take a look at a few situations that illustrate the power of: not.

The Web Designer Toolbox Unlimited Downloads: 1,000, 000+ Web Templates, Themes, Plugins, Design Resource, and so much better!

HTML Templates

Web Templates 2,000+ Templates

Email Templates

Newsletter Templates 270+ Templates

Admin Templates

Dashboard Templates 150+ Templates

WordPress Themes

WordPress Themes 1,200+ Themes

WordPress Plugins

WordPress Plugins 550+ Plugins

Mockup Templates

Mockup Templates 8,200+ Templates

Start Downloading Now !

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 are benefiting from large screens. However, that’s the only place we want to add this style for now.

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

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

This allows us to implement full-width content on the home page, while still maintaining it at 66% wide everywhere else. So, even though they are a sheet has a class other than. secondary-content, that principle still holds true.

Here’s how it searches in practice 😛 TAGEND

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 is still regions within a website where you don’t certainly want this visual improvement. Navigation tables and even footers might forgo highlighted associations altogether.

In this scenario, we’ll underline ties-in- but only within the #content ingredient. Every other orbit of our imaginary page will forego them.

To accomplish this, we’ll look for child elements of the. container aspect, which folds around the entirety of the page. Relates that are not within the #content point will have a style of text-decoration: nothing ;.

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 forms are often adjusted for different types of page schemes. You might want to use different font sizings and boundaries, for example, within a multi-column layout as opposed to a single-column page.

Large text titles could be especially overwhelming when used in smaller infinites. With this lesson, we’ll adjust

constituents to better fit in these situations.

Specifically, the CSS we’ve written assumes that any

components that aren’t within in a container using the. single_column class should be made smaller. In addition, we’ve altered the dye and a few other properties.

See the Pen CSS: not- Different heading forms for multi-column organizations by Eric Karkovack

:not a Bad Way to Control Your CSS

Part of the knockout of CSS is in its flexibility. There are often a number of ways to accomplish a rendered destination. 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 was just thinking about other techniques for doing the very same thing. And there are indeed goes when you might just wanted to take a different approach.

But in many cases,: not can increase efficiency. It saves us from separately targeting several selectors who are in need of same styling. And, as previously mentioned, it’s immense for those one-off design parts that we want to stand out. Browser support is also very strong.

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

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

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

Read more: speckyboy.com

Comments (0) Trackbacks (0)

No comments yet.

Leave a comment

No trackbacks yet.