What’s the difference between an id and a class?

by

ids must be unique where as class can be applied to many things. In CSS, ids look like #elementID and class elements look like .someClass

In general, use id whenever you want to refer to a specific element and class when you have a number of things that are all alike. For instance, common id elements are things like header, footer, sidebar. Common class elements are things like highlight or external-link.

It’s a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html

The most basic precedence you should understand, however, is that id selectors take precedence over class selectors. If you had this:

<p id="intro" class="foo">Hello!</p>

and:

#intro { color: red }
.foo { color: blue }

The text would be red because the id selector takes precedence over the class selector.

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. How do I vertically center text with CSS? [duplicate]
  3. How to make a div fill a remaining horizontal space?
  4. Why doesn’t nth-of-type/nth-child work on nested elements?
  5. How can I style even and odd elements?
  6. How can I vertically center a div element for all browsers using CSS?
  7. Responsive image map
  8. How to make a vertical line in HTML
  9. Why top margin of html element is ignored after floated element?
  10. How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
  11. How to create a curve between two gradient using CSS?
  12. How can I fill a div with an image while keeping it proportional?
  13. How do I make the whole area of a list item in my navigation bar, clickable as a link?
  14. Is it considered bad practice to use absolute positioning? [closed]
  15. How to create a transparent triangle with border using CSS?
  16. 5 items per row, auto-resize items in flexbox
  17. Image label for input in a form not clickable in IE11
  18. Default :target with CSS
  19. How to center a (background) image within a div?
  20. Changing the highlight color when selecting text in an HTML text input
  21. Why do my list item bullets overlap floating elements
  22. How to add a background image on top of a previous background image?
  23. Css hover sometimes doesn’t work on svg paths
  24. Unwanted border-radius corners around images in Brave/Chrome browser
  25. Bootstrap 3 – show collapsed navigation for all screen sizes
  26. How can I prefix ordered list item numbers with a static string using CSS?
  27. Font Awesome & Unicode
  28. CSS crop string in the middle
  29. Change image on hover
  30. What does “semantically correct” mean?

Leave a Comment