CSS what means # or . or nothing?

Off-Topic
3

As part of a CSS selector, # means that what follows is the ID of an element on the page to which you want to apply the CSS properties in the block. IDs on the page should be unique per element. Let’s say that I have this HTML button on the page:

<button id="buttonStart">Start</button>

I can use the #buttonStart selector to identify only that element as the target of this CSS:

#buttonStart {
  color: white;
  background-color: red;
}

., on the other hand, signifies a class selector. Classes can be applied to many elements on the page. So, using the following example:

<button id="buttonStart" class="timer-button">Start</button>
<button id="buttonEnd" class="timer-button">End</button>

With this CSS:

#buttonStart {
  font-size: 14px;
}

We can make all elements on the page that implement the class timer-button have a larger text size than other elements on the page.

You can even go further and have classes that apply to different types of elements but are differentiated by their node type:

<button id="buttonStart" class="red-text">Start</button>
<div class="red-text">Some text</div>

button.red-text {
  color: #f00;
}
div.red-text {
  color: #d00
}

Hope that’s helpful.

1 Like