Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Selectors : Select Element by Class Name

You can select several items at once if they all share the same class name. CSS Class Names are identified in CSS with the period (aka "dot").

Have you ever seen a laptop table? There are many different kinds! Some have a handle, some have folding legs while others have a bean bag bottom. Imagine you were describing the laptop table shown on the right. Now imagine trying to describe it in CSS. You would want to point out the brand, the size, the color, the features, etc. Whether you ordered one or twelve of these items, they would all be an exact replica of each other. That is what a class name does when assigned to different elements on the page. No matter who becomes the owner of the laptop table, you could say the tables all belong to the same class. And no matter what element you apply a CSS class name to (p, div, li) every item with the same class name shares the same properties and values.

Class Name Selectors

HTML

html code with class name

CSS

css class name selected

RESULTS

ID are Unique

  • Your fingerprint is the password.
  • Fingerprint ID function provides a safe way for unlocking
  • Locking device can record up to 10 fingerprints

NOTE

You can use the same class name for multiple elements. Notice how the first 2 lines of code are for h4 which sets the font-size to 1.5em. However, the second h4 has a class name of feature-3 which will override the previous font-size definition and therefore the second h4 has its font-size set to 1.0em. You must remember to write your CSS in the order in which you want the rules applied. Basically, styles written at the bottom of the style sheet overrides styles written at the top of the file.


Do you believe you understand how to select elements by class name? If yes, hit the next button below and continue learning more about CSS.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved