Dangling Element Selectors in CSS and Why You Should Avoid Them

Photo: Pexels.com/@negativespace

CSS selectors are used to specify what elements a set of CSS rules are applied to. There are different types of CSS selectors: pseudo, class, attribute, etc. You can look here for a full list of the selectors and how they can be used.

One particular type of selector that is of interest here is the (element) type selector. Type selectors are usually reserved for making extensive changes in stylesheets as they match elements by node name. They are usually found in base and reset stylesheets where they define default properties.

Type selectors are often advised against for regular styling and are usually considered “bad practice”. When used inappropriately, they cause several issues that affect code maintenance. One of the most common of these issues is what is referred to as a dangling element selector.

What are dangling element selectors?

Dangling element selectors are, in most cases, child elements that are styled using a type selector (element name), as opposed to using a class or an id.

For better context, let’s examine the CSS code below:

From the example, the properties defined will be applied to any span element found in that parent element. That span element is an example of a dangling element selector.

Unfortunately, they are very rampant in a lot of stylesheets today, and they pose a threat to the long term maintainability of projects. They can have unexpected side effects in the long run, and it is important that we understand these effects beforehand.

What are the problems associated with dangling element selectors?

There are a number of pitfalls associated with dangling selectors and I’ll highlight a couple of them as follows...

1. They don’t provide context or clarity about what they are being used for.

Looking at the span element in the snippet below:

It is difficult to know what the span element is actually being used for. It is possible that it is used to emphasize a short text, or as a label or tag on a post. The purpose can be anything really, but unfortunately, there is no clue here.

2. The dangling element cannot be used for something else in that block.

If there is a need to use another span element in that code block, say for an entirely different purpose, there are going to be issues because the properties from that snippet will automatically be applied to all available span elements in that parent-element.

For more context, let’s examine the html code below:

From this snippet, the second span will be affected by the dangling selector in the CSS. Its position (inside of the paragraph) won't matter, and neither will its own style definitions.

3. The dangling selector can lock your styles to a specific HTML structure, and that can hinder code reusability.

If there is a need to apply the same styles to elements with different markups in several sections of the project, there will be a problem. Code duplication will most likely occur, and that is not good.

For example:

The CSS properties defined for the list above cannot be applied outside of the post element, even if we need our lists to be the same across several sections.

4. Maintenance becomes difficult as that code block can (and will) break easily if the element changes.

There are various cases during code refactoring where you discover semantic errors in the HTML and decide to fix them. Maybe an em or strong tag is more appropriate in place of the second span element (in the example in 2 above).

If you substitute the span element for the desired element, it will cause the text that it wraps to loose the desired styling, causing a possible break in that section or page. There will be a need to revisit the CSS, which may not be necessary in the first place.

Mike Riethmuller, one of my favorite CSS developers and writers, also addressed a similar concern about dangling selectors in a tweet.

5. The stylesheet becomes difficult to understand without seeing the corresponding html markup.

To understand what that span element is used for, one would need to check the HTML for the data that it contains, and for further clarity, you might be required to preview the section/page in the browser, which is really unnecessary.

6. Changes in the markup or stylesheet become dependent on each other.

Unless your intention is to break the code or cause some discrepancies in a specific section or page, it is completely impossible to make any structural change in the html markup without consulting the stylesheet, and vice-versa.

7. Properties set on the dangling element can cascade to child elements unintentionally.

Even though the style definitions were intended for the dangling element, some of the styles may be inherited by child elements inside of it.

For example:

The CSS properties defined above for the list will definitely cascade down the nested list, and that might not be intended. Maybe we want the nested list to look different from its parent, that won’t be the case here.

How do you avoid dangling element selectors?

At the barest minimum, just add an appropriate and meaningful class attribute to the element and use that to style instead.

For example:

This simple fix has the following implications:

  1. Only the span element with the post__date class is affected by the properties defined, and only the one with the highlight class will have blue color. This means that one can easily add several span elements in the post element as desired.
  2. One can easily substitute the span in the html markup for any other element (e.g. strong) as appropriate, and give the highlight class to it and everything remains intact.
  3. Anybody can make a conscious change or substitution in the html markup keeping the class(es) in mind.
  4. With the use of appropriate class names, one can simply have an understanding of what the element with any of the selectors is doing just by looking at the stylesheet, without having to consult the html markup.
  5. Also, when we do away with dangling selectors and use classes appropriately, it fosters reusability. You can simply apply classes to several elements with different structures without duplicating your styles or complicating them.

In conclusion.

As much as possible, it is recommended that the use of dangling selectors be avoided if scalability, maintenance or readability are a concern.

There is no use case for a dangling element selector. Every element can be styled using a class or an id. Do not make code maintenance frustrating for yourself, or for participants in a collaborative project.

Thanks to Mike Riethmuller for his input on this article.

Thank you for reading. If you find this post insightful in any way whatsoever, please endeavor to share it with someone.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tosin Orimogunje

Tosin Orimogunje

Multi-disciplinary User Interface Engineer — passionate about building web and mobile user interfaces that are beautiful, functional, and inclusive.