Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Hi!

I am stuck on tasks 27-29, where I have to select children of .sharp elements in the row.

My table rows have the class “sharp” or "half and it all looks good in the console. But this CSS is not passing:

tr.sharp > td {
border-bottom: 1px dashed var(–dashed-border);
}

tr.half > td {
border-bottom: 1px dashed var(–dashed-border);
}

I can’t figure out what I’m missing. Any ideas?

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" />
  <link rel="stylesheet" href="styles.css" />
  <title>Availability Table</title>
</head>
<body>
  <table>
    <caption>Availability Table</caption>
    <thead>
      <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sharp">
        <th class="time">10 AM</th>
        <td class="available-1">1</td>
        <td class="available-2">2</td>
        <td class="available-3">3</td>
        <td class="available-4">4</td>
        <td class="available-5">5</td>
      </tr>
      <tr class="half">
        <th class="time">11 AM</th>
        <td class="available-1">1</td>
        <td class="available-2">2</td>
        <td class="available-3">3</td>
        <td class="available-4">4</td>
        <td class="available-5">5</td>
      </tr>
      <tr class="sharp">
        <th class="time">12 PM</th>
        <td class="available-1">1</td>
        <td class="available-2">2</td>
        <td class="available-3">3</td>
        <td class="available-4">4</td>
        <td class="available-5">5</td>
      </tr>
      <tr class="half">
        <th class="time">1 PM</th>
        <td class="available-1">1</td>
        <td class="available-2">2</td>
        <td class="available-3">3</td>
        <td class="available-4">4</td>
        <td class="available-5">5</td>
      </tr>
      <tr class="sharp">
        <th class="time">2 PM</th>
        <td class="available-1">1</td>
        <td class="available-2">2</td>
        <td class="available-3">3</td>
        <td class="available-4">4</td>
        <td class="available-5">5</td>
      </tr>
    </tbody>
  </table>

  <div id="legend">
    <span>Availability</span>
    <div id="legend-gradient"></div>
  </div>
</body>
</html>

/* file: styles.css */
:root {
  --color0: orangered;
  --color1: aquamarine;
  --color2: cadetblue;
  --color3: chocolate;
  --color4: darkseagreen;
  --color5: limegreen;
  --solid-border: midnightblue;
  --dashed-border: royalblue;
}

.available-0 { background-color: var(--color0); }
.available-1 { background-color: var(--color1); }
.available-2 { background-color: var(--color2); }
.available-3 { background-color: var(--color3); }
.available-4 { background-color: var(--color4); }
.available-5 { background-color: var(--color5); }

/* Task 27 and 28 and 29: Apply border to td in .sharp and .half rows */
tr.sharp > td {
  border-bottom: 1px dashed var(--dashed-border);
}

tr.half > td {
  border-bottom: 1px dashed var(--dashed-border);
}

#legend {
  font-size: 1.2em;
  color: orangered;
  width: 30%;
  margin-top: 20px;
  margin-left: 20px;
}

#legend-gradient{
  width: 75%;
  height: 15px;
  background-image: linear-gradient(
    90deg, 
    var(--color0) 0% 16%, 
    var(--color1) 16% 33%, 
    var(--color2) 33% 49%, 
    var(--color3) 49% 66%, 
    var(--color4) 66% 83%, 
    var(--color5) 83% 100%
    );
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

the test expects you to not use the >, also do not specify the element name for the first part of the selector, use only the class

3

Thank you so much. That did it!