1 reply [Last post]
caters
Offline
newbie
Last seen: 1 year 44 weeks ago
Timezone: GMT-4
Joined: 2017-07-13
Posts: 1
Points: 2

I do not understand how CSS can be overqualified. I should be able to affect different elements in 1 class differently. But the code editor I am using(the one on codecademy if you didn't know) insists that my CSS is overqualified and that I should get rid of the element.

span.death{background-color:#000000; color:#FF0000;}
span.immunity{background-color:#00FF00;}
div.air{background-color:#87CEEB;}
div.infection{background-color:#BB0A1E;}

I don't think my code is overqualified and neither do I think that any code editor should say it is overqualified. Because if there are multiple elements with the same class. I should be able to affect them differently for each element.

Here is the HTML code that goes with this CSS code:

<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' href='style.css'/>
	<script src='script.js'></script>
</head>
<body>
    <h1>Viral TB</h1>
        <p>Viral TB is the worst virus that any Kepler Bb humanoid can be infected with. It can be transmitted in every way possible, causes symptoms in every part of the body, and cycles between active and latent until the humanoid either <span class = "death">dies</span> or gets <span class = "immunity">lifelong immunity</span> to the virus.</p>
        <div class = "Infection">
        <h2>Transmission of the Virus</h2>
            <p>There is no safe way to prevent a humanoid from passing on the virus other than personal protective equipment. Here are all the ways the virus can be transmitted from most common to least common</p>
            <ol>
                <li>Airborne</li>
                <li>Waterborne</li>
                <li>Foodborne</li>
                <li>Direct contact</li>
                <li>Vector</li>
                <li>Injection</li>
                <li>Sex</li>
                <li>Pregnancy</li>
            </ol>
            </div>
            <div class = "air">
            <h3>Airborne Transmission</h3>
                <p>Airborne transmission is the most common way for the virus to be transmitted between 2 humanoids. It includes all of these ways to transmit the virus in the air:                  </p>
                    <ul>
                      <li>Sneezing</li>
                      <li>Coughing</li>
                      <li>Breathing</li>
                    </ul>
                <p>If the virus is transmitted through the air, the humanoid will get symptoms within minutes of breathing in the virus starting with nasal congestion and sneezing and then a sore throat. From this point it separates into 2 different organ systems. Some of the viruses continue down to the lungs and cause pneumonia. The other viruses go down the GI tract starting with esophagitis and ending with proctitis  </p>
            </div>
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 1 year 45 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

it's "overqualified" because

it's "overqualified" because you're targeting only elements that are a `span` and has the class `.death`.

You should just be selecting by their class names only and not the tag.

.death{background-color:#000000; color:#FF0000;}
.immunity{background-color:#00FF00;}
.air{background-color:#87CEEB;}
.infection{background-color:#BB0A1E;}

If you use the same class name for a different type of style, then you should consider nesting your styles instead of selecting based off of the element.

<p class="hello">Hello <span class="name">John Doe</span></p>
<p class="welcome">Hope you're having a great day <span class="name">John</span>!</p>

Then you can style based off of the parent

.hello .name {
  // ...
}
 
.welcome .name {
  // ...
}

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph