Styling image in CSS doesn't work

Question

Can someone please tell me what i'm doing wrong here, the css works when i replace the .1{} with img{}. Shouldn't I also be able to use img.1{} or .1 img{}

Here's the UPDATED HTML

<!DOCTYPE html>
<html>
<head>
<title>Test Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clouds">
<img id="cheese" src="cloud.png">
</div>
</body>
</html>

And the UPDATED CSS

  body{
    margin:0;
    padding:0;
    background:#0088ff;
    font-family:helvetica;
}
#clouds{
    overflow:hidden;
    width:100vw;
    height:100vh;
}
#cheese img{
    display:none;
}

hi now first of you check to this url stackoverflow.com/questions/448981/… — Rohit Azad Malik
– Rohit Azad Malik, Commented Jul 30, 2015 at 6:41
so why doesn't it work with a text id now. That is valid code isn't it? — user2072017
– user2072017, Commented Jul 30, 2015 at 6:49
You're referencing the image in CSS using wrong selectors! Read the basics. Change it to img#cheese { — Matt Komarnicki
– Matt Komarnicki, Commented Jul 30, 2015 at 6:52

Community · Accepted Answer · 2017-05-23 11:52:16Z

6

Change the class name from 1 to something that starts with a letter and try again.

After all read this.

EDIT:

I see you have some problems with basic things.

If your image has an ID like <img id="foo" src="" /> then you reference in CSS using img#foo { } (tag + hash + identifier) or just using id without providing type of the tag: #foo { }.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jul 30, 2015 at 6:40

Matt Komarnicki

5,4728 gold badges51 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tejas Over a year ago

Classes have to start with letters. It's a thing. If you rename .1 to .class-1, it'll work.

Rohit Azad Malik · Accepted Answer · 2015-07-30 06:55:03Z

1

Numbers at the beginning of a class name are not illegal in the CSS grammar.

"The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit."

You are just specifying the name the wrong way.

See http://www.w3.org/TR/CSS21/grammar.html

Try to this way according to updated your question

img#cheese {
    display:none;
}

or

#clouds>img{
    display:none;
}

edited Jul 30, 2015 at 6:55

answered Jul 30, 2015 at 6:45

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Comments

Manindra Singh · Accepted Answer · 2015-07-30 06:50:20Z

0

if you have multiple images then you can use like this:you can use like this:

<style>
#clouds{
overflow:hidden;
width:100vw;
height:100vh;
}
.1{
display:none;
}
.2{
display:block;
}
</style>

<div id="clouds">
<img class="1" src="cloud.png">
<img class="2" src="cloud.png">
</div>

edited Jul 30, 2015 at 6:50

answered Jul 30, 2015 at 6:42

Manindra Singh

7695 gold badges10 silver badges35 bronze badges

3 Comments

Matt Komarnicki Over a year ago

It will but with that solution he won't know what was the issue (class naming).

user2072017 Over a year ago

yeah but i want multiple images with individual parameters, without making a div for each one. Shouldn't i be able to give and id to an image though?

Matt Komarnicki Over a year ago

Give it an id or a class or refer using data attributes - what suits your needs. It doesn't matter. What matters is using a valid name for classes and ids. :)

Collectives™ on Stack Overflow

Styling image in CSS doesn't work

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related