CODEWITHSUNDEEP
htmlcss
David Smirnoff
David Smirnoff

Reputation: 13

CSS classes don't change with the attribute selector

My html is linked to the right CSS file and everything and when I point any other element to change color it workes but everytime I deal with classes even when I put .class {color: red;} it doesn't work and for the span[yes]{color: purple;} as well.Is it maybe an outdated CSS, something I need to update?

<!doctype html>
    <html>

        <head>
        <title>Css for bigginers</title>
             <link rel="stylesheet" type="text/css" href="../Sandbox/syntax.css">     
        </head>



        <body>
                <div>

                    <span >WHats poppin</span>
                    <span class= "class">yo Im a span tag</span>
                    <span class= "deck">yo<strong>Im a span tag</strong> </span>
                    <span class= "deck">yo Im a span tag</span>
                    <span class= "yes">yo Im a span tag</span>

                    <a href = "#"> im a spanner</a>

                    <p>This is good</p>
                    <p>The world is beutiful</p>
                    <p class="test">I know tell me about it</p>
                </div> 
        </body>

    </html>

    /***** CSS FILE *****/
    span[yes]{
        color: purple;
    }

Upvotes: 0

Views: 128

Answers (4)

AlexP
AlexP

Reputation: 4430

In CSS, span[yes] means a <span> element which has the attribute yes, which is obviously not the case in your code. Either span.[class="yes"] or the shorthand span.yes will work. See the chapter Selectors in the CSS specification.

Upvotes: 0

Ec_
Ec_

Reputation: 66

By span[yes] you are addressing to spans that have yes attribute. Instead use

.deck{
  color: red;
}

where .deck is the name of the class you set in the html element:

<span class= "deck"></span>

Upvotes: 0

user7207170
user7207170

Reputation:

You need to use span.class and span.yes instead of span[yes]. A good practice is not to name the class as class or span or any any keywords used in html or css selectors.

Upvotes: 0

Jaxon Crosmas
Jaxon Crosmas

Reputation: 477

This is not how you refer to a class. To refer to a class, you must do it like this:

.yes{
  color: red;
}
<span class= "yes">yo Im a span tag</span>

Upvotes: 1

Related Questions