Help me step 78

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" type="text/css" 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/102.0.0.0 Safari/537.36

Challenge: Step 78

Link to the challenge:

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

You’ve combined the selectors with nothing between them, .cap.sleeve. That would select anything that had both of those classes - that isn’t what you want.

Google is the most important skill a dev has. If I google “css selectors”, I come to this page. In that page I see how to select all of something and all of something else (it shows with elements, but it is the same for classes.)

3

@Duong You PMed me to help you some more with this.

What are you not understanding? What have you tried?

You want to select for all the class “cap” and and all the class “sleeve”. When I go to that page I see this table:

Selector Example Example description
.class .intro Selects all elements with class=“intro”
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id=“firstname”
* * Selects all elements
element p Selects all

elements
element.class p.intro Selects all

elements with class=“intro”
element,element div, p Selects all
elements and all

elements
element element div p Selects all

elements inside

elements
element>element div > p Selects all

elements where the parent is a

element
…

Can you see which one of those most closely matches our needs? Hint: It’s row number is more than 7 and less than 9. :wink:

4

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