[SOLVED] How do the symbols * . and # apply to IDs differently?

Inkers · November 9th, 2007, 12:20 PM

So I've been doing some site reading and have been plowing through source CSS to see how 'other people' do it to get a grip on how CSS can be applied and what magic it makes happen.

There is one thing I'm a bit unsure about though. Reading through, I've often seen the symbols *, . or # applied in front of an ID or applied at least somewhere in the first line.

At first I thought that # was instead of 'div ID' to make things shorter and tidier but now I'm not sure. Would someone be able to explain to me how the symbols are used in CSS and how their application differentiates from the others? i.e using * instead of # and so on.

I'd be hugely grateful

Aso · November 9th, 2007, 12:24 PM

# in css indicates an ID. Say if in your html you have

Code:

 <div id="menu">text...</div>

You would use '#menu' in your css to apply the corresponding styles. The * symbol is a 'wild card' and applies to every element

I guess I should also mention that . is for assigning style to a class (much like an ID, but can have multiple instances in the same page)

So for

Code:

<a class="link" href="#">text...</a>

You would use '.link' in your css

The only items in css that don't require the # or . or when you apply styles to html tags (body, div, a ,span etc).

Going back to the first example, 'div#menu' is effectively the same as using '#menu', the same as 'a.link is the same as '.link'. It's sometimes useful however to use the former, as you can tell straight off what tag you used that particular id or class on

karinne · November 9th, 2007, 12:27 PM

Alright ... well ...

# is the symbol for ID selector ... so ... your ID
CSS

Code:

#container {
   background-color: #990;
}

HTML

HTML Code:

<div id="container">
   bla bla bla
</div>

. is the symbol for class selector which you use to determine a class name
CSS

Code:

.something {
   color: #900;
}

HTML

HTML Code:

<span class="something">bla bla bla</span>

and

* is the universal selector using this mean to apply the properties to ALL elements. Read this article - No Margin For Error

Marc · November 9th, 2007, 12:27 PM

In the css you you will have '*','#' and '.'.

Firstly the * is for a universal selector, if you use this, this will apply to ALL.

# is for an id=. You can use it like:

CSS:

Code:

#test {
/* My CSS here! */

HTML:

HTML Code:

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

Please remember ID's can be applied to anything (<span>, etc.). You should also only use ID's ONCE per page.

.'s (dots) are for class=. You can use it like:

CSS:

Code:

.thisisaclassincss {

/* My Css Here! /*
}

HTML Code:

<span class="thisisacssclass"></span>

Classes can be used as many times as you like per page!

You can also use "BODY, HTML, p, etc" in your css. Like so:

Code:

body {
/* My CSS here */
}

html {
/* My CSS here */
}

p {
/* My CSS here */
}

Hope that helps!

I will try and find a website that will explain this better

EDIT: Just noticed Karinne's post! Check out her links - especailly the No Margin For Error...

MikeHopley · November 9th, 2007, 12:34 PM

"*" is the universal selector. It matches any element. For example:

Code:

* {
margin: 0;
padding: 0;
}

This removes the margins and paddings from all elements. This is not usually a good idea. "*" is generally useless, but you can use it in combination with other selectors. It's also frequently used in a hack for Internet Explorer (this is bad practice).

"." denotes a class. For example:

Code:

.note {
font-size: 120%;
}

This would increase the font size of all elements with the class name "note" (such as <p class="note">).

"#" denotes an ID. These are much the same as classes, but IDs must be unique; only one element can ever have an id (such as <div id="header">). IDs are more convenient to manipulate with javascript than classes are, and they also "rank" much higher than classes whenever there is a conflict of CSS rules.

Code: