The importance of blending classes versus isolating classes in CSS selectors

Question

The importance of blending classes versus isolating classes in CSS selectors

Could somebody please direct me to the CSS hierarchy rules concerning "concatenated classes" versus "separated classes"?

Furthermore, what are the correct terms for "concatenated classes" versus "separated classes" (I suspect that is why the documentation I am looking for remains elusive.)

For instance, in the CSS provided below, .row .second (with a space) seems to have higher precedence than .row.second (without a space), despite both matching 2 class attributes.

.row {
  width: 150px;
  background-color: lightgray;
  margin: 15px;
}

section {
  margin-left: 15px;
}

.row .second {
  color: purple;
}

.row.second {
  color: orange;
}

When applied to the following HTML, the above CSS yields this outcome: https://i.sstatic.net/acKxF.png

Why is "Stuff 2b" displayed in purple instead of orange? (In simpler terms, why does .row .second take precedence over .row.second in this scenario?)

<div id='outerBox'>
<div class="row">
  <div class="title">
  Row 1 Title
  </div>
  
  <section>
    Stuff 1a
  </section>

  <section class='second'>
    Stuff 1b
  </section>

  <section>
    Stuff 1c
  </section>
</div>

<div class="row second">
  <div class="title">
  Row 2 Title
  </div>
  
  <section>
    Stuff 2a
  </section>

  <section class='second'>
    Stuff 2b
  </section>

  <section>
    Stuff 2c
  </section>
  </div>
  
  <div class="row">
  <div class="title">
  Row 3 Title
  </div>
  
  <section>
    Stuff 3a
  </section>

  <section class='second'>
    Stuff 3b
  </section>

  <section>
    Stuff 3c
  </section>
  
</div>
</div>

(The CSS mentioned here is being used on the HTML provided above in JSFiddle on Chrome for MacOS.)

css css-selectors

Answer 1

Answer №1

Using separate classes for styling child elements in CSS is a common practice. For example:

.row .red # This targets red child elements within the row
{
  color:red;
}

<tr class="row">
   <td class="red">
      <p>Hey!</p> ### The text color of this paragraph will be red.
   </td>
</tr>

The elements with the class name "red" within the ".row" class will have a red color.

However, concatenated classes are used when specifying an element with multiple classes together like "with".

Let me provide an example:

.row.red # This targets elements with both "row" and "red" classes
{ 
  color:red;
}

<tr class="row">
   <td class="red">
      <p>Hey!</p> # The color of this paragraph will not be red.
   </td>
</tr>

<tr class="row red">
   <td class="">
      <p>Hey!</p> # However, this paragraph will be styled in red.
   </td>
</tr>

Answer 2

Using separate classes for styling child elements in CSS is a common practice. For example:

.row .red # This targets red child elements within the row
{
  color:red;
}

<tr class="row">
   <td class="red">
      <p>Hey!</p> ### The text color of this paragraph will be red.
   </td>
</tr>

The elements with the class name "red" within the ".row" class will have a red color.

However, concatenated classes are used when specifying an element with multiple classes together like "with".

Let me provide an example:

.row.red # This targets elements with both "row" and "red" classes
{ 
  color:red;
}

<tr class="row">
   <td class="red">
      <p>Hey!</p> # The color of this paragraph will not be red.
   </td>
</tr>

<tr class="row red">
   <td class="">
      <p>Hey!</p> # However, this paragraph will be styled in red.
   </td>
</tr>

Answer 3

Answer №2

Although commonly used, classes do not relate to Object Orientation. This means that there is no object-oriented mechanism for 'concatenating/separating' elements. It essentially serves as a syntax for defining different types of CSS selectors. I often view CSS definitions as an elaborate list of conditional if-statements.

without space, .row.second: includes all .row elements that also have the class .second
with space, .row .second: selects all .row elements that contain child elements with the class .second, regardless of nesting level.

This implies that there is no specific hierarchy at play in this scenario. You are either targeting any second row element or any second child element within a row element.

Your confusion might stem from the difference in notation between CSS and HTML tags:

<tag class="row second">

with space is different from .row .second { ... } which also contains spaces, but they are equivalent to .row.second { ... } without spaces. Essentially, it represents a <tag> that has both the classes .row and .second.

In CSS, spaces signify selecting parent elements with the class .row and then selecting their child elements with the class .second.

Update

I failed to mention (as @TemaniAfif did) that the property color is inherited from the parent, assuming that OP already knew this.

Displayed below are various examples showcasing different scenarios:

div>* {
  background-color: lightgray;
  margin: 15px;
}

/* default styling */
.row, .default1    { color: purple }
.second, .default2 { color: orange }

/* exceptions in special cases */
.row.second, .exception1  { color: green }
.row .second, .exception2 { color: red }

<p><b>Legend:</b> explanation per parent class used and (rule that applies)</p>

<h3>no parent class</h3>
 <div>
   <div>no class, will inherit document default styling</div>
   <div class="row">row, styled in purple (default1)</div>
   <div class="second">second, styled in orange (default2)</div>
   <div class="row second">row second, styled in green (exception1)</div>
</div>

<h3>.row parent</h3>
<div class="row">
   <div>no class, inherits purple styling from the parent (default1)</div>
   <div class="row">row, styled in purple like its parent (default1)</div>
   <div class="second">second, styled in red as it is a child of row (exception2)</div>
   <div class="row second">row second, styled in red, overrides parent styling (exception2)</div>
</div>

<h3>.second parent</h3>
<div class="second">
   <div>no class, inherits orange styling from the parent (default2)</div>
   <div class="row">row, styled in purple, overrides parent styling (default1)</div>
   <div class="second">second, styled in orange just like its parent (default2)</div>
   <div class="row second">row second, styled in green, overrides parent styling (exception1)</div>
</div>

<h3>.row .second parent</h3>
<div class="row second">
   <div>no class, styled in green inherited from parent (exception1)</div>
   <div class="row">row, styled in purple overriding parent styling (default1)</div>
   <div class="second">second, styled in red as a child of row (exception2)</div>
   <div class="row second">row second, styled in red, overrides parent styling (exception2)</div>
</div>

Answer 4

Although commonly used, classes do not relate to Object Orientation. This means that there is no object-oriented mechanism for 'concatenating/separating' elements. It essentially serves as a syntax for defining different types of CSS selectors. I often view CSS definitions as an elaborate list of conditional if-statements.

without space, .row.second: includes all .row elements that also have the class .second
with space, .row .second: selects all .row elements that contain child elements with the class .second, regardless of nesting level.

This implies that there is no specific hierarchy at play in this scenario. You are either targeting any second row element or any second child element within a row element.

Your confusion might stem from the difference in notation between CSS and HTML tags:

<tag class="row second">

with space is different from .row .second { ... } which also contains spaces, but they are equivalent to .row.second { ... } without spaces. Essentially, it represents a <tag> that has both the classes .row and .second.

In CSS, spaces signify selecting parent elements with the class .row and then selecting their child elements with the class .second.

Update

I failed to mention (as @TemaniAfif did) that the property color is inherited from the parent, assuming that OP already knew this.

Displayed below are various examples showcasing different scenarios:

div>* {
  background-color: lightgray;
  margin: 15px;
}

/* default styling */
.row, .default1    { color: purple }
.second, .default2 { color: orange }

/* exceptions in special cases */
.row.second, .exception1  { color: green }
.row .second, .exception2 { color: red }

<p><b>Legend:</b> explanation per parent class used and (rule that applies)</p>

<h3>no parent class</h3>
 <div>
   <div>no class, will inherit document default styling</div>
   <div class="row">row, styled in purple (default1)</div>
   <div class="second">second, styled in orange (default2)</div>
   <div class="row second">row second, styled in green (exception1)</div>
</div>

<h3>.row parent</h3>
<div class="row">
   <div>no class, inherits purple styling from the parent (default1)</div>
   <div class="row">row, styled in purple like its parent (default1)</div>
   <div class="second">second, styled in red as it is a child of row (exception2)</div>
   <div class="row second">row second, styled in red, overrides parent styling (exception2)</div>
</div>

<h3>.second parent</h3>
<div class="second">
   <div>no class, inherits orange styling from the parent (default2)</div>
   <div class="row">row, styled in purple, overrides parent styling (default1)</div>
   <div class="second">second, styled in orange just like its parent (default2)</div>
   <div class="row second">row second, styled in green, overrides parent styling (exception1)</div>
</div>

<h3>.row .second parent</h3>
<div class="row second">
   <div>no class, styled in green inherited from parent (exception1)</div>
   <div class="row">row, styled in purple overriding parent styling (default1)</div>
   <div class="second">second, styled in red as a child of row (exception2)</div>
   <div class="row second">row second, styled in red, overrides parent styling (exception2)</div>
</div>

The importance of blending classes versus isolating classes in CSS selectors

Answer №1

Answer №2

Similar questions

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Angular JS is having some issues with rendering the style correctly

elevate design css/widget/components

Animated CSS side panel

Learn to Generate a Mathematical Quiz with Javascript

What is the best way to ensure that all elements on an HTML webpage stay centered regardless of zoom level?

Not all Angular Material2 styles are being fully applied

Automatically adjusting input box size and position in real-time

How to display (fade in a portion of an image) using .SVG

Utilize custom {tags} for replacing strings in a CSS file using str_replace in PHP

Scrollable content below the div

Employ CSS to target the initial and final items within sets of identical elements

Floating and scrolling navigation bar not functioning properly in bootstrap framework

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

The removal of classList.remove() only eliminates the class itself, not its contents

concealing components during screen adjustments

Is it possible to utilize CSS rules for a non-existent div within CSS?

Stretch the div to the right and maintain its horizontal width

Looking for a prerequisite for running this script?

Align columns to the right and left using Bootstrap