I'm programming a todo app in React. At the bottom I give the date when the todo is due. If it is due today, it is red, if not, it is normal. I give the small day the class "dueToday" if it is due today. That also works:
<small className="dueToday">2021-11-24</small>
<small>2021-11-25</small>
In my CSS I have the following code:
small .dueToday {
/* color: rgb(160,84,112); */
color: red;
}
In the browser it looks like this: Screenshot
React Code:
{todos.map((todo) => (
<div
key={todo.id}
className="todo"
onClick={() => deleteTodo(todo.id)}
>
<h3>{todo.title}</h3>
{todo.due !=
`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` ? (
<small>{todo.due}</small>
) : (
<small className="dueToday">{todo.due}</small>
)}
</div>
))}
Your issue is you are looking for a small tag that has inside item with the class .dueToday you are supposed to check if a small tag with a .dueToday class, to do that just remove the space in your CSS selector like this:
small.dueToday {
/* color: rgb(160,84,112); */
color: red;
}