CSSHelp issue with getStyleAny #64218
Description
span[class~="one"] *:first-of-type {
background-image: linear-gradient(#f93, #f93);
border-color: #d61;
}
span[class~="two"] *:nth-of-type(-n + 2) {
background-image: linear-gradient(#f93, #f93);
border-color: #d61;
}this code passes the tests in curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md even if the selectors are not in the lists of selectors
ref: https://discord.com/channels/692816967895220344/718214639669870683/1444029826553090180
also tested myself, it passes.
Whole code below
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Inventory</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
<tbody>
<tr class="read">
<td>The Color Of Magic</td>
<td>Terry Pratchett</td>
<td>Fantasy</td>
<td><span class="status">Read</span></td>
<td><span class="rate three"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span></td>
</tr>
<tr class="read">
<td>The Goldfish Boy</td>
<td>Lisa Thompson</td>
<td>Young Adult</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span></td>
</tr>
<tr class="read">
<td>300 Most Important Tactical Chess Positions</td>
<td>Thomas Engqvist</td>
<td>Chess</td>
<td><span class="status">Read</span></td>
<td><span class="rate two"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span></td>
</tr>
<tr class="to-read">
<td>Beginners' Step-by-step Coding Course</td>
<td>DK</td>
<td>Education</td>
<td><span class="status">To Read</span></td>
<td><span class="rate"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span></td>
</tr>
<tr class="in-progress">
<td>The Lord of the Rings: The Fellowship of the Ring</td>
<td>John Ronald Reuel Tolkien</td>
<td>High Fantasy</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span></td>
</tr>
</tbody>
</table>
</body>
</html>styles.css
html {
font-family: sans-serif;
text-align: center;
}
span {
display: inline-block;
}
h1 {
text-align: left;
}
thead {
background-color: black;
color: white;
}
span[class^="rate"] > span {
width: 1rem;
height: 1rem;
background-color: #aaa;
margin: 2px;
border: 2px solid #666;
border-radius: 100%;
}
span[class~="one"] *:first-of-type {
background-image: linear-gradient(#f93, #f93);
border-color: #d61;
}
span[class~="two"] *:nth-of-type(-n + 2) {
background-image: linear-gradient(#f93, #f93);
border-color: #d61;
}
span[class~="three"] span {
background-image: linear-gradient(#f93, #f93);
border-color: #d61;
}
span[class="status"], span[class^="rate"] {
width: 6rem;
height: 1.2rem;
padding: 7px;
}
tr[class="read"] {
background-image: linear-gradient(#cfc);
}
tr[class="to-read"] {
background-image: linear-gradient(#ccf);
}
tr[class="in-progress"] {
background-image: linear-gradient(#fcc);
}
tr[class="read"] span[class="status"] {
background: linear-gradient(#7f7, #595);
border-radius: 20%;
border: 0;
font-weight: bold;
}
tr[class="to-read"] span[class="status"] {
background: linear-gradient(#aaf, #669);
padding: 7px;
border-radius: 20%;
border: 0;
font-weight: bold;
}
tr[class="in-progress"] span[class="status"] {
background: linear-gradient(#f77, #a55);
padding: 7px;
border-radius: 20%;
border: 0;
font-weight: bold;
}getStyleAny is defined here: