Skip to content

Latest commit

 

History

History
87 lines (63 loc) · 2.56 KB

index.md

File metadata and controls

87 lines (63 loc) · 2.56 KB
Raw
title slug page-type
Selector (CSS)
Glossary/CSS_Selector
glossary-definition

{{GlossarySidebar}}

A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.

Example

Consider this CSS:

p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}

The selectors here are "p" (which applies the color green to the text inside any {{HTMLElement("p")}} element), "div.warning" (which makes any {{HTMLElement("div")}} element with the class "warning" look like a warning box), and "#customized", which sets the base font of the element with the ID "customized" to 16-pixel tall Lucida Grande or one of a few fallback fonts.

We can then apply this CSS to some HTML, such as:

<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>

The resulting page content is styled like this:

{{EmbedLiveSample("Example", 640, 240)}}

See also