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 http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names-selectors — Rohit Azad Malik, Jul 30 '15 at 06:41
so why doesn't it work with a text id now. That is valid code isn't it? — user2072017, Jul 30 '15 at 06:49
You're referencing the image in CSS using wrong selectors! Read the basics. Change it to img#cheese { — Matt Komarnicki, Jul 30 '15 at 06:52

score 6 · Answer 1 · edited May 23 '17 at 11:52

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 '17 at 11:52

Community

1
1

answered Jul 30 '15 at 06:40

Matt Komarnicki

5,198
7
40
92

Classes have to start with letters. It's a thing. If you rename .1 to .class-1, it'll work. – Tejas Jul 30 '15 at 06:41

Rohit Azad Malik · Answer 2 · 2015-07-30T06:55:03.010

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;
}

Manindra Singh · Answer 3 · 2015-07-30T06:50:20.563

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 '15 at 06:50

answered Jul 30 '15 at 06:42

Manindra Singh

769
4
10
35

It will but with that solution he won't know what was the issue (class naming). – Matt Komarnicki Jul 30 '15 at 06:43
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? – user2072017 Jul 30 '15 at 06:44
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. :) – Matt Komarnicki Jul 30 '15 at 06:45

Styling image in CSS doesn't work

3 Answers3