CODEWITHSUNDEEP
css
BigRedDog
BigRedDog

Reputation: 928

CSS ID and order of properties

I have a quick question regarding CSS and ID.

This is what my CSS code looks like:

h1  {
   font-family: 'Cabin', sans-serif;
   font-size: 36px;
   color: red;
}


#test h1 {
   color: green;
   font-size:10px;
}

My HTML looks like this:

<html>
<head>
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<link href='http://fonts.googleapis.com/css?family=Cabin:600' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 >asdfasdf<a href="/">test1</a></h1>
<h1 id="test">test</h1>
</body>
</html>

The output looks like this -> http://screencast.com/t/H2LOmJr7zd6f

My question is how come the H1 with ID test is not in green font?

If in the CSS I replace #test h1 with #test, it will work.

Thanks!

Upvotes: 0

Views: 58

Answers (2)

Mahdi
Mahdi

Reputation: 9417

I think Italy is right. If you want to indicate the element also you should do this:

h1#test { ... }

Upvotes: 2

Itay
Itay

Reputation: 16777

You're using the CSS ID selector wrong. Your current selector #test h1 chooses h1 elements which are inside an element with ID of #test

Using the ID is enough:

#test {
   color: green;
   font-size:10px;
}

P.S - If for some reason you really like to specify the element type with the ID (which is quite redundant for the ID is supposed to be unique), you can use this selector: h1#test

Upvotes: 5

Related Questions