CODEWITHSUNDEEP
css
leora
leora

Reputation: 196589

What is the difference between # and . with CSS?

What is the difference between # and . with CSS?

#main
{
    background-color: #fff;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}


.main
 {
    background-color: #fff;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
 }

Upvotes: 0

Views: 1228

Answers (8)

Lalit Kumar Maurya
Lalit Kumar Maurya

Reputation: 5565

# used with an id name for writing css for it in a html page that must be unique.

. used with a class name for writing css for it that can used anywhere in html page.

Example::

 <div id="container"> 
     <div class="container"> 
        <div class="container"> 
             Foo thing
        </div>
     </div>
 </div>

And its CSS as below

#container, .container {
   position: relative;
   margin: 20px 50px;
   ......
   .........
}

or seperate as below

#container {
    position: relative;
    margin: 20px 50px;
    ......
    .........
}

.container {
    position: relative;
    margin: 20px 50px;
    ......
    .........
}

Upvotes: 0

Sinan
Sinan

Reputation: 11563

'#' sign represents the id of a html element. it is for:

<div id='main'>...</div>

'.' sign represents the class of a html element. and this is for:

<div class='main'>...</div>

Upvotes: 7

Gavrisimo
Gavrisimo

Reputation: 1837

From the HTML 4 spec:

The id attribute assigns a unique identifier to an element.

The id attribute has several roles in HTML:

  • As a style sheet selector.
  • As a target anchor for hypertext links.
  • As a means to reference a particular element from a script.
  • As the name of a declared OBJECT element.
  • For general purpose processing by user agents (e.g. for identifying
    fields when extracting data from HTML pages into a database, translating
    HTML documents into other formats,
    etc.).

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

  • As a style sheet selector (when an author wishes to assign style information to a set of elements).
  • For general purpose processing by user agents.

Upvotes: 7

Gumbo
Gumbo

Reputation: 655369

The # indicates an ID selector, the . a class selector. IDs must be unique in a document (so there is only one element with one specific ID) while a class can contain multiple elements and an element can be in multiple classes.

So #main will select the one element that’s ID main is while .main will select all elements that are in the class main. Apart from that, both selectors have a different specificity that affect the order in which CSS properties are applied to elements or overwrite existing properties.

Upvotes: 1

Akash Kava
Akash Kava

Reputation: 39926

# is applied automatically to element with same id CSS

#id1 {some style}

HTML

<div id="id1"> <-- automatically applied here...

CSS

.Dot1 {}
DIV.Dot2 {}

DIV.Dot2 an only be applied to DIV with class "Dot2" if any other element tries to use Dot2 it will not work

HTML

<div class="Dot1"> <-- only applies when you give class..

. is not applied automatically indeed you have to use it in "class" attribute of every element where you want to apply them.

Upvotes: 1

Pete OHanlon
Pete OHanlon

Reputation: 9146

'#' represents using a id, and . represents an class. As you are aware, you can't duplicate IDs in HTML, so if you want the same styling to represent multiple items, you'd use a class instead.

Upvotes: 1

collimarco
collimarco

Reputation: 35400

A class (.my_class_name) may be present multiple times in the same page while an id (#my_id_name) is unique.

Upvotes: 5

AAA
AAA

Reputation: 4956

'#' represents an id. the '.' is a class.

So.. <tagname id="main"> and <tagname class="main">....

hope that helps.

Upvotes: 8

Related Questions