Duong
June 24, 2022, 6:58am
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:
.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.)
@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.
system
Closed
December 24, 2022, 2:31am
4
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.