A Few Solutions to Some CSS Element Selector Problems

Occasions arise when unusual forms of CSS selectors are required in order to uniquely target the desired HTML element within the markup on a website page. However, CSS has solutions for nearly all of the potentially difficult situations that may arise.

Use Cases

Often in website building these days, third party tools are in use which have a lot of control over the HTML and CSS markup. For example, when using the Bootstrap framework, the .row selector may be used at multiple levels of the HTML markup hierarchy, and may need to be modified at only one of those levels of the hierarchy, but not at others. In other situations a third party component might not provide adequate CSS markup to easily and uniquely identify an element that needs to be styled. For example, recently in the development of Drupal 8 Commerce 2.x, the developers were injecting the names of some of the product elements into the HTML markup their component produced. However, some less used CSS selector features provided a solution to the problem. 

Examples

With CSS it is possible to define specific styles for intersecting sets of CSS classes on elements. Imagine, for example a set of HTML markup that includes .foo and .bar style separately, but which also needs to be styled differently if the .foo and .bar classes have both been applied to an element. There is a CSS selector solution for this problem. By declaring both of the selectors together, concatenated with each other, such as - .foo.bar - the styles applied will target any HTML element that has both of those two selectors declared on it. In the context of the illustration provided by the example CSS and HTML below, each of the three list elements will have a different color as specified by the three different selectors. Although the example below may not seem practical, there is a real world example of the need for this right on this website.

.foo { background-color: red; }

.bar { background-color: green; }

.foo.bar { background-color: blue; }

<ul>
  <li class="foo">red</li>
  <li class="bar">green</li>
  <li class="foo bar">blue</li>
</ul>

A real word application of the principle above exists within the CSS styles for this website. As a matter of background, this website employs the Bootstrap framework to provide page layout support. In contexts where elements of a page involved multiple columns, the Bootstrap framework uses the .row CSS class to specify that child the div elements create columns if they define additional Bootstrap CSS classes. However, website often have multiple nested occurences of the .row CSS class. However, sometimes when working with additional components, in this case the Drupal Views module, its markup led to the need for using a .foo.bar CSS style to define the paddings and margins for card on some of this website's landing pages. 

The HTML below is a simplified version of the actual HTML markup that implements the multiple column grids on the this website's landing pages. 

<div class="row">
  <section class="col-md-8">
    <div class="region region-content">
      <div class="content">
        <div class="row view-articles-grid">
          <div class="view-content">
            <div class="col-md-6 col-sm-6 views-row">#</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

.row.view-articles-grid
{
  background-color: #eee;
}
.row.view-articles-grid .col-md-6.col-sm-6.views-row
{
  background-color: #ddd;
}
.row.view-articles-grid .col-md-4.col-sm-4.views-row
{
  background-color: #ccc;
}