Learn CSS Colors by Building a Set of Colored Markers - Step 78

I’m having trouble figuring out how to make a new selector that targets both the “cap” and “sleeve” classes.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>CSS Color Markers</h1>
  <div class="container">
    <div class="marker red">
      <div class="cap"></div>
      <div class="sleeve"></div>
    </div>
    <div class="marker green">
    </div>
    <div class="marker blue">
    </div>
  </div>
</body>
</html>
/* file: styles.css */
h1 {
text-align: center;
}

.container {
background-color: rgb(255, 255, 255);
padding: 10px 0;
}

.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}

.cap {
width: 60px;
height: 25px;
}

.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
}

.cap.sleeve{
display:inline-block;
}

.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 78

Link to the challenge:

Look back at this challenge:

Hey! In CSS there are many types of selectors which you can use to target very specific types of elements in your HTML.

for example, if you wanted to select a button element which is inside of a div you would do something like this:

div button{
    color: red;
}

// if your  HTML looks like this.

<div>
     // this button's color will change
    <button> inner button</button>
</div>

// this button's color will not change
<button> outer button</button>

In the same way, when you create a selector using two class selectors without a space for example:

.cap.sleeve

In english this would loosely translates to: “Select any element that has the class of .cap as well as .sleeve”

for example:

// this button will be selected
<button class="cap sleeve"> </button>

which is not what you want. To complete this challenge, all you need to do is put a comma between the two selectors which will change its meaning to : “Select any elements that have the class of cap or sleeve”.

Hope this helps :smile:
p.s. if you would like to take a deep dive in the CSS selectors world, i would advise you to go through “Grouping Selectors” section in this article.

Will do. Thank you for your suggestion!

Reading that page helped me figure out the answer! Thank you for your help!

1 Like