<\/script>')
Clever Geek Handbook

Why isn't my CSS changing here as it should?

I have the following HTML combined with some PHP:

echo "<a href='" . $_SERVER["PHP_SELF"] . "?guess=" . $value . "' class='already-guessed'>" . $value . "</a>\n";

It applies a special class if it already guessed as the class suggests. I have this in case it was not guessed:

echo "<a href='" . $_SERVER["PHP_SELF"] . "?guess=" . $value . "'>" . $value . "</a>\n";

And this is the relevant CSS:

.letters a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 3px 6px 0;

    background: #5ac9ff;
    color: #fff;
    line-height: 2.5em;
    text-align: center;
    text-decoration: none;
}

    .letters a:nth-child(10n) {
        margin: 0 0 8px 0;
    }

    .letters a:hover {
        background: #54bff3;
    }

    .letters a:active {
        background: #4fb4e4;
    }

.already-guessed {
    background: green;
}

So, I just discovered the whole anchor.

+3


source to share


1 answer


The anchor selector is beneficial. Change your code for the class .already-guessed

as follows:

.already-guessed {
    background: green !important;
}


Or, if you like, update the selector:

.letters a.already-guessed {
    background: green;
}
+3


source






More articles:


All Articles