Difference between . and # in CSS

Question

I have been learning CSS over the past couple of days and always wondered what the different with the . or # when declaring a header was. Example:

.test
{
  some stuff here
}

#test
{
  Some stuff here
}

What are the key differences between the . and the #?

Answer 1

# is an ID selector. . is a class selector. It's like comparing, say, a precision tweezer with a shovel.

There can only be one element with a given ID on the page, giving the # selector a much higher precedence than classes.

Answer 2

. -> this refers to css for a class its for specifying css for elements that has the class set in that name. Multiple elements can have same class

For example

<div class='xyz'></div>
<div class='xyz'></div>
<div class='xyz'></div>

by writing

.xyz
{
width:100px;
height:100px;
}

we can have common width height for all those div

# refers to ID ID is unique Only one element can have an ID in a html page its for applying css properties pertaining to one particular element for example

<div id="div1" class='xyz'></div>
<div id="div2" class='xyz'></div>
<div class='xyz'></div>

by writing

.xyz
{
width:100px;
height:100px;
}


#div1
{
width:200px;
}

we will have div1 width as 200! CSS properties with # have more priority than .

> i.e # css will overwrite . Css

look at this example jsfiddle http://jsfiddle.net/rbyKx/

Answer 3

. is class and # is id

ID's are unique

Each element can have only one ID

Each page can have only one element with that ID

Classes are NOT unique

You can use the same class on multiple elements.

You can use multiple classes on the same element.

so thats the major difference

you can take an example of BAR CODE and SERIAL NUMBER

bar code is same for a product {class} and serial no is different for each instance of a product {id}

Answer 4

.test {...} selects elements of the specified class. #test {...} selects the element with the specified ID. (there should never be more than one element with a given ID)

Answer 5

.test will be applied on element containing class test and #test will be applied on element containing id test

Answer 6

This is for CSS in general, and is not specific to CSS3.

Using a # will select HTML elements by the id attribute (note that ids must be unique on a page).

Using a . will select HTML elements by the class attribute, and will select elements whose list of classes contains the class specified in your CSS.

CSS selectors also have a precedence "score" to determine which rules win out over other ones. Since ids are unique, they have a far higher score than a class selector, and hence will take higher precedence.

You can read more about CSS selectors here.

Answer 7

Well this is just regular CSS not CSS3.

.test means target any elements that have the class test, for example

<div class="test">I am targeted</div>
<div class="testnot">I am not targeted</div>

#test means target the element that have the id test, for example

<div id="test">I am targeted</div>
<div id="testnot">I am not targeted</div>

IDs MUST be unique, many elements can contain the same class.

Answer 8

the . is for classes and # is for ids.

So

Styles you define in .test { } rule will apply to any element of class _test_ eg:

<div class="test"></div> 

Styles you define in #test { } rule will apply to the element that has test as an id. eg:

<div id="test"></div>

Answer 9

The Dot is used for classes and the Hash (#) is used for IDs . Classes are defined to style various section elements and can be used multiple times .

IDs are basically used to define a specific section of a page .They can only be used once .

Class example If I want to set the font size of every paragraph on page you can do the following using classes :

p.font-size{
        font-size:12px;
 }

Id example: If I have to change the font size of a specific para I can use the following way :

#Size {
font-size:10px;
}

and than use it in html this way

  <p id="Size">your para</p>

The id here will override any style defined in the css classes