How to select a scope in a div?

advertisements

I'm having an issue coloring a span with css. Everything is working fine on the webpage however when I try to select a span in a div it doesn't work. Am I missing something dumb here?

<!doctype html>
<html>
<head>
    <title>Test</title>
    <link href="style/mainstyle.css" rel="stylesheet" type="text/css">
    <script src= https://code.jquery.com/jquery-latest.min.js></script>

</head>

<body>
    <header>
        <h1>TEST</h1>
    </header>

    <main>
        <div class = "tab1 triad">
            <script src="primejs.js"></script>

            <span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>

            <input class = "primeNum" type = "text">
            <button class = "submit">Submit</button>

            <span class = "result">
                <h2>What I found: <span class = "answer">?</span></h2>
            </span>
        </div>
    </main>
</body>

and here is the css:

.tab1 span.red {
    color: RED;
    font-size: 100;
}


Cleaned up your HTML, you had a some stray and missing tags.

Bin demo

<div class="tab1 triad">
  <span class="red">
    <h2>Type in a number and I'll check if it is prime:</h2>
  </span>

  <input class="primeNum" type="text">
  <button class="submit">Submit</button>

  <span class="result">
    <h2>What I found: <span class="answer">?</span></h2>
  </span>
</div>

And your css was missing the px after 100

.tab1 span.red {
  color: red;
  font-size: 100px;
}