CSS Attribute Selectors — How to Use Them to Hide Annoyances

frog-mascot

CSS attribute selectors are a great way to do more with less code. Some WordPress plugins tend to display annoying ads or links. You can use CSS attribute selectors to hide such annoyances.

What will you learn in this post?

I will show you:

  • what are CSS attribute selectors
  • the various types of CSS attribute selectors
  • practical applications of CSS attribute selectors

What Are CSS Attribute Selectors

CSS lets you define identifiers, classes, and relationships which you are then able to style. In some cases, however, this is not enough.

Consider that you a have a set of classes that are dynamically generated. Let’s say that there is a CSS class called css_class_ to which a plugin adds a new numeral suffix each time a page is loaded.

Therefore, any number of these classes can be created, from css_class_0 to, let’s say, css_class_262143.

It would be impossible or at least very impractical to style all the individual classes in this set.

This is where CSS attribute selectors come in very handy.

A CSS attribute selector lets you style all these classes starting with css_class_ very simply, like this:

This way, any element that is defined as a class and its value begins with css_class_, will be now hidden.

Using CSS Attribute Selectors

You can use the following attribute selectors in CSS:

1. element[attribute]

Select all elements with an attribute.

Example:

2. element[attribute=”value”]

Select all elements with an attribute and a value.

Example:

3. element[attribute=”exactvalue”]

Select all elements with an attribute and a value containing a specified keyword.

Example:

4. element[attribute=”value-whatever”]

Select all elements with an attribute and a value beginning with a specified keyword.

Example:

Note

The keyword value has to be a whole word. It can be alone. Or it can be within a set of values, which need to be separated by hyphens, like this: class="top-image".

5. element[attribute=”valuewhatever”]

Select all elements with an attribute and a value beginning with a specified (even partial) keyword.

Example:

Note

The keyword value doesn’t, actually, have to be a whole word. It can go like this: class="imagefirst".

6. element[attribute=”whatevervalue”]

Select all elements with an attribute and a value ending with a specified (even partial) keyword

Example:

Note

The keyword value doesn’t, actually, have to be a whole word. It can go like this: class="primarynav".

7. element[attribute=”whatevervalueanything”]

Select all elements with an attribute and a value containing a specified (even partial) keyword

Example:

Note

The keyword value doesn’t, actually, have to be a whole word. It can go like this: class="title-texts-top".

8. input[type=”value”]

CSS attribute selectors are also very useful to style forms.

Example:

The available input type attribute values are: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, and week.

9. Combine Multiple Attribute Matches

You can also combine several attribute matches.

Example:

An Example of WordPress Plugin Annoyances — Linkwithin

One of the annoyances that often comes up is with the Linkwithin widget/plugin.

Linkwithin allows you to add custom related posts widget to your blog.

Linkwithin widget setup

Linkwithin widget setup

You define your blog’s URL, hosting platform (Blogger, self-hosted WordPress, Typepad, or other), and the number of related posts that should be displayed (3, 4, or 5).

Then you click on the Get Widget button which generates your custom linkwithin.zip file containing your Linkwithin plugin.

The last thing you need to do is go to your WordPress Dashboard > Plugins > Add New and upload, install, and activate the linkwithin.zip file.

So, back to the annoying little thing about LinkwWithin… It adds a clickable gray Linkwithin text under each line of displayed related posts.

The Linkwithin Annoyance

The Linkwithin Annoyance

Obviously, you can’t turn this off in any other way, just by using CSS attribute selectors.

First, you need to find out the identifier of the Linkwithin link. I like to use Google Chrome’s Inspect element feature for this. Just right-click on the Linkwithin text and select Inspect element from the drop-down menu.

After inspecting a few of these links, you will quickly figure out that they all start with linkwithin_logolink_.

To hide all their occurrences, add this code snippet to WordPress Dashboard > Appearance > Edit CSS:

If you don’t have the Edit CSS feature available, install WordPress JetPack right now!

Alternatively, you can add the above CSS code to your theme’s style.css file via WordPress Dashboard > Appearance > Editor.

Final Thoughts

CSS attribute selectors are an awesome way to deal with Linkwithin-like situations.

Have you run into other WordPress plugins where you used one of the above mentioned attribute selectors to get rid of an annoyance? Let me know in the comments section below.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *