Comparing Background Color Application in HTML/CSS

asasass · May 12, 2024, 3:51pm

Which is more common to see?

<div class="initial">
<div class="panel initial"></div>
</div>

.panel.initial {
    background-color: #B76BF0;
}

vs.

<div class="containerC">
<div class="curtain">
</div>

.containerC .curtain{
    background-color: #B76BF0;
}

From Bing Copilot:

Both of the CSS class naming conventions you’ve shown are commonly used, but they serve different purposes and are used in different contexts.

.panel.initial: This is an example of a multi-class selector. The div has two classes, panel and initial, and the CSS rule applies when an element has both 1. This is a simple and common way to apply styles, but it can lead to confusion if the classes are used in different contexts.

.containerC .curtain: This is an example of a descendant selector. The CSS rule applies to any element with the class curtain that is a descendant of an element with the class containerC1. This is a more specific selector and is commonly used to style elements in a specific context.

PaulOB · May 12, 2024, 3:56pm

That’s nonsense.

You have an initial class on the parent but also on the child so any styles you place on the parent you also place on the child which is very confusing and prone to error.

I would do it this way.

<div class="initial">
  <div class="panel panel1"></div>
</div>

.panel1 {
    background-color: #B76BF0;
}

Less specificity, no descendant selector needed and less chance of error. You can also account for common styles in .panel. Its win win at every level.

asasass · May 12, 2024, 3:59pm

You would do this differently?

.containerC .curtain{
    background-color: red;
}

<div class="curtain"> </div>

css:

.curtain {
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
  background: repeating-linear-gradient(calc(var(--angle1) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)),
    repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px));
  background-color: #222;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  overflow: hidden;
  transform: translateY(0);
}

.containerC .curtain{
    background-color: red;
}

html:

<div class="containerC hide">
    <div class="inner-container">
      <div class="flex">
        <div class="blue-margin-bottom">
          <svg width="136" height="136" viewBox="0 0 136 136">
            <rect x="0" y="0" width="136" height="136" fill="#0059dd" />
            <rect x="4" y="4" width="128" height="128" fill="black" />
            <rect x="8" y="8" width="120" height="120" fill="#0059dd" />
            <rect x="12" y="12" width="112" height="112" fill="black" />
            <rect x="16" y="16" width="104" height="104" fill="#0059dd" />
            <rect x="20" y="20" width="96" height="96" fill="black" />
            <rect x="24" y="24" width="88" height="88" fill="#0059dd" />
            <rect x="28" y="28" width="80" height="80" fill="black" />
            <rect x="32" y="32" width="72" height="72" fill="#0059dd" />
            <rect x="36" y="36" width="64" height="64" fill="black" />
            <rect x="40" y="40" width="56" height="56" fill="#0059dd" />
            <rect x="44" y="44" width="48" height="48" fill="black" />
            <rect x="48" y="48" width="40" height="40" fill="#0059dd" />
            <rect x="52" y="52" width="32" height="32" fill="black" />
            <rect x="56" y="56" width="24" height="24" fill="#0059dd" />
            <rect x="60" y="60" width="16" height="16" fill="black" />
            <rect x="64" y="64" width="8" height="8" fill="#0059dd" />
          </svg>
        </div>
        <div class="orange-margin">
          <h1 class="title-text">text</h1>
        </div>
        <div class="yellow-padding-margin">
          <h2 class="center-text">text</h2>
        </div>
      </div>


      <div class="btn-wrap">
        <button data-destination="#ba" class="playButtonB" type="button" title="Open" aria-label="Open"></button>
      </div>


      <div id="ba" class="modalB">
        <div class="inner-modalB">
          <div class="ratio-keeper">

            <div class="video buttonA"></div>

            <div class="buttonA"></div>
                        <div class="curtain">
              <div class="flex-container">
                <div class="heart">
                  <div class="heart-piece-0"></div>
                  <div class="heart-piece-1"></div>
                  <div class="heart-piece-2"></div>
                  <div class="heart-piece-3"></div>
                  <div class="heart-piece-4"></div>
                  <div class="heart-piece-5"></div>
                  <div class="heart-piece-6"></div>
                  <div class="heart-piece-7"></div>
                  <div class="heart-piece-8"></div>
                </div>
              </div>
            </div>
          </div>
          <button class="closeB" type="button" title="Close" aria-label="Close">&times</button>
        </div>
      </div>
    </div>

asasass · May 12, 2024, 4:04pm

This doesn’t work. https://jsfiddle.net/3s09vLm2/2/

.

curtain .curtainB{
    background-color: red;
  
}

   <div class="curtain curtainB">

asasass · May 12, 2024, 4:05pm

This doesn’t work. https://jsfiddle.net/3s09vLm2/2/


.curtain .curtainB{
    background-color: red;
  
}

<div class="curtain curtainB">

Now it works: https://jsfiddle.net/3s09vLm2/4/

 .curtainB{
    background-color: red;
}

<div class="curtain curtainB">

PaulOB · May 12, 2024, 4:20pm

Well it depends on whether all the curtains are different in different contexts.

Otherwise it would just be:

 .curtain{
    background-color: red;
}

If you want other curtains of different colors then you could target them by their parent as you have done but in my opinion its best to avoid descendant selectors if you don’t need them.

I would do it as:

 .curtain2{
    background-color: red;
}

<div class="curtain curtain2"> </div>

Now you can use curtain2 anywhere you like and not just inside containerB or C.

Its not wrong to use:

.containerC .curtain{
    background-color: red;
}

It all depends on context but my method is more usable.

Of course not. That’s lesson one in CSS!

That css refers to this structure.

 <div class="curtain"
   <div class="curtainB"></div>
</div>

For your structure you would need this with no space between the classes:

.curtain.curtainB{
    background-color: red;
  
}

But once again why be so verbose if you don’t have to and just say:

.curtainB{
    background-color: red;
}

That assumes that simple specificity has occurred in the original declaration.

asasass · May 12, 2024, 4:23pm

The first 3 curtains are background-color: #222;

I just wanted the one inside the modal to be a different color.

.containerC .curtain{
    background-color: red;
}

So, then go with this way:

 .curtainB{
    background-color: red;
}

<div class="curtain curtainB">

PaulOB · May 12, 2024, 4:31pm

Either are fine but I would do it that last way as it keeps it down to one simple selector.

Sometimes what’s best is what suits you best and I see less mistakes by keeping things simple.

asasass · May 13, 2024, 12:52pm

If I would want this heart to be a different color:

              <div class="heart">
                <div class="heart-piece-0"></div>
                <div class="heart-piece-1"></div>
                <div class="heart-piece-2"></div>
                <div class="heart-piece-3"></div>
                <div class="heart-piece-4"></div>
                <div class="heart-piece-5"></div>
                <div class="heart-piece-6"></div>
                <div class="heart-piece-7"></div>
                <div class="heart-piece-8"></div>
              </div>

.heart-piece-0 {
  left: 0;
  height: 30px;
  top: -15px;
  background-color: #0059dd;
}

.heart-piece-1 {
  left: 16px;
  height: 60px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-2 {
  left: 32px;
  height: 80px;
  top: -37px;
  background-color: #0059dd;
}

.heart-piece-3 {
  left: 48px;
  height: 90px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-4 {
  left: 64px;
  height: 94px;
  top: -23px;
  background-color: #0059dd;
}

.heart-piece-5 {
  left: 80px;
  height: 90px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-6 {
  left: 96px;
  height: 80px;
  top: -37px;
  background-color: #0059dd;
}

.heart-piece-7 {
  left: 112px;
  height: 60px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-8 {
  left: 128px;
  height: 30px;
  top: -15px;
  background-color: #0059dd;
}

In this container:

I would do what?

If I would want to make them all green, I would do what?

 <div class="containerC hide">
        <div class="inner-container">
          <div class="flex">
            <div class="blue-margin-bottom">
              <svg width="136" height="136" viewBox="0 0 136 136">
               
              </svg>
            </div>
            <div class="orange-margin">
              <h1 class="title-text">text</h1>
            </div>
            <div class="yellow-padding-margin">
              <h2 class="center-text">text</h2>
            </div>
          </div>
          <button data-destination="#ba" class="playbuttonB" type="button" title="Open" aria-label="Open"></button>
          <div id="ba" class="modalB">
            <div class="inner-modalB">
              <div class="ratio-keeper">
                <div class="video buttonA"></div>
                <div class="buttonA"></div>
                <div class="curtain curtainB">
                  <div class="flex-container">
                    <div class="heart">
                      <div class="heart-piece-0"></div>
                      <div class="heart-piece-1"></div>
                      <div class="heart-piece-2"></div>
                      <div class="heart-piece-3"></div>
                      <div class="heart-piece-4"></div>
                      <div class="heart-piece-5"></div>
                      <div class="heart-piece-6"></div>
                      <div class="heart-piece-7"></div>
                      <div class="heart-piece-8"></div>
                    </div>

        </div>
      </div>
    </div>

PaulOB · May 13, 2024, 1:01pm

One way is as follows:

 <div class="heart heart2">
     <div class="heart-piece-0"></div>
    etc..

.heart2 > div{background:green;}

Or as mentioned before you could do this but is more html:

 <div class="heart">
             <div class="heart-piece-0 heart2"></div>
             <div class="heart-piece-1 heart2"></div>
             <div class="heart-piece-3 heart2"></div>
            <div class="heart-piece-4 heart2"></div>
etc...

.heart2 {background:green;}

The second version is simpler css but more actual html and the first version is simpler html but a longer css selector.

system · August 12, 2024, 8:01pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.