In CSS what is the difference between and when declaring a set of styles

Question

What is the difference between   and   when declaring a set of styles for an element and what are the semantics that come into play when deciding which one to use

User · Answer

class targets the following element    lt div class  class  gt  lt  div gt     class targets the following element    lt div id  class  gt  lt  div gt    Note that the id MUST be unique throughout the document  whilst any number of elements may share a class

User · Answer

The dot    signifies a class name while the hash     signifies an element with a specific id attribute   The class will apply to any element decorated with that particular class  while the   style will only apply to the element with that particular id   Class name    lt style gt      class          lt  style gt    lt div class  class  gt  lt  div gt   lt span class  class gt  lt  span gt   lt a href       class  class  gt     lt  a gt    Named element    lt style gt      name          lt  style gt    lt div id  name  gt  lt  div gt

User · Answer

It is also worth noting that in the cascade  an id     selector is more specific than a b     selector  Therefore  rules in the id statement will override rules in the class statement   For example  if both of the following statements    headline     color red    font-size  3em      specials     color blue    font-style  italic      are applied to the same HTML element    lt h1 id  specials  class  headline  gt Today s Specials lt  h1 gt    the color blue rule would override the color red rule

User · Answer

The   means that it matches the id of an element  The   signifies the class name    lt div id  myRedText  gt This will be red  lt  div gt   lt div class  blueText  gt this will be blue  lt  div gt     myRedText       color  red     blueText       color  blue      Note that in a HTML document  the id attribute must be unique  so if you have more than one element needing a specific style  you should use a class name

User · Answer

The   is an id selector  It matches only elements with a matching id  Next style rule will match the element that has an id attribute with a value of  green     green  color  green    See http   www w3schools com css css syntax asp for more information

User · Answer

A couple of quick extensions on what has already been said     An id must be unique  but you can use the same id to make different styles more specific   For example  given this HTML extract    lt div id  sidebar  gt       lt h2 gt Heading lt  h2 gt       lt ul class  menu  gt                   lt  ul gt   lt  div gt   lt div id  content  gt       lt h2 gt Heading lt  h2 gt           lt  div gt   lt div id  footer  gt       lt ul class  menu  gt                   lt  ul gt   lt  div gt    You could apply different styles with these    sidebar h2           sidebar  menu           content h2           footer  menu             Another useful thing to know  you can have multiple classes on an element  by space-delimiting them      lt ul class  main menu  gt     lt  ul gt   lt ul class  other menu  gt     lt  ul gt    Which allows you to have common styling in  menu with specific styles using  main menu and  sub menu   menu           main menu           other menu

User · Answer

Like pretty much everyone has stated already   A period     indicates a class  and a hash     indicates an ID   The fundamental difference between is that you can reuse a class on your page over and over  whereas an ID can be used once  That is  of course  if you are sticking to WC3 standards   A page will still render if you have multiple elements with the same ID  but you will run into problems if when you try to dynamically update said elements by calling them with their ID  since they are not unique   It is also useful to note that ID properties will supersede class properties

User · Answer

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 attribute id  foo   foo    will style all elements with an attribute class  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  lt h1 class  error  gt   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  lt div id  sidebar  class  box  gt  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

User · Answer

Here is my aproach of explaining te rules  style and  style are part of a matrix  that if not in the right order  they can override each other  or cause conflicts   Here is the line up   Matrix   style 0 0 1 0 id   style 0 1 0 0 class   if you want override these two you can use  lt style gt  lt  style gt  witch has a matrix level or 1 0 0 0  And  media query s will override everything above    I am not sure about this but i think the ID selector   can only be used once in a page

[css] In CSS what is the difference between "." and "#" when declaring a set of styles?

Examples related to css

Examples related to css-selectors