In CSS what is the difference between . and # when declaring a set of styles?
Yes, they are different...
#
is an id selector, used to target a single specific element with a unique id, but . is a class selector used to target multiple elements with a particular class. To put it another way:
#foo {}
will style the single element declared with an attributeid="foo"
.foo {}
will style all elements with an attributeclass="foo"
(you can have multiple classes assigned to an element too, just separate them with spaces, e.g.class="foo bar"
)
Typical uses
Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.
Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {}
which would only apply to <h1 class="error">
Specificity
Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles conflict on an element, the ones defined with the more specific selector will override less specific selectors. For example, given <div id="sidebar" class="box">
any rules for #sidebar
with override conflicting rules for .box
Learn more about CSS selectors
See Selectutorial for more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.
EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this archive link instead.
Difference between . and # in CSS
#
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.
What is the difference between the two uses of a hash character in a CSS selector?
Yes, the second selector has higher specificity.
#someId
is just a single ID and will select any element with that ID regardless of what element it is. a#someId
is both an element and an ID, making it more specific as it will only select anchor a
elements with that ID.
There is a common trick to calculating specificity and comparing the specificity of different selectors, which is to count the IDs, classes, and elements like X,X,X. The most specific selector is the one with the highest leftmost number (if that is a tie, move to the next number).
#someId
is just an ID, so it's 1,0,0.
a#someId
is an ID and an element, so it's 1,0,1 and therefore more specific.
IDs are always more specific than classes and classes are always more specific than elements. Psuedo-elements count as elements and psuedo-classes count as classes for the purposes of calculating specificity. Technically 256 elements = 1 class and 256 classes = 1 ID, but if you ever have that much going on in a selector string you have way bigger problems to worry about.
The only thing more specific than an ID (besides a selector string containing several IDs) is a style with !important
or an inline style declared via the style
attribute on the element.
More about CSS Specificity:
- Specifics on CSS Specificity (CSS Tricks)
- CSS Specificity (Smashing Mag)
- CSS Specificity (MDN)
- Understanding CSS Specificity (Nettuts)
Change the style of an element if the fragment identifier (hash) in the URL references it
It’s easily done with CSS only, no JavaScript needed. Use the :target
pseudo-class selector:
p#reference:target{background-color:gold;}
<p id="reference">lorem ipsum</p><a href="#reference">to target</a><a href="#">untarget</a>
Is a CSS property starting with a hash (#) valid?
It is not valid. #width: 75%;
is a syntax error, since #
isn't used in CSS property names (although it is used in CSS selectors, to select elements with specific id
s). Most browsers will ignore it (hopefully) and only the first rule will be applied.
It might have been someone's attempt to write a CSS comment. This is the valid way: /*This is a comment*/
Edit
I would suggest using a CSS reset file to account for browser differences.
Related Topics
Smallest Data Uri Image Possible For a Transparent Image
Does Element Width Include Padding
Dynamically Change Color to Lighter or Darker by Percentage Css
Css Specificity, Media Queries and Min-Width
Bootstrap 3 Unable to Display Glyphicon Properly
Two-Tone Background Split by Diagonal Line Using CSS
Scrollable Menu with Bootstrap - Menu Expanding Its Container When It Should Not
Removing Display:Flex Adds Spaces Around a Link. Why
Css: Fixed to Bottom and Centered
How to Center Elements Horizontally or Vertically With Twitter Bootstrap
How to Draw a Circle Sector in Css
How to Make a Footer Fixed in the Page Bottom
How to Make Round Corners to Both Inside of a Box and Its Border
Import .CSS File into .Less File
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7