CSS Selectors

CSS Selectors

Type Selectors

• Matches element name. h1 {...}

Universal Selectors

• Applies to all elements.

* {
  border: 1px solid black;
}

Class Selectors

<p class="fancy intro">Fancy intro paragraph.</p>
<p class="fancy">Fancy paragraph.</p>
<p>Regular paragraph.</p>

.fancy {
  font-style: italic;
}
.fancy {
  ...;
} /* only fancy styles */
.intro {
  ...;
} /* only intro styles *x/
/* only applies if "fancy" AND "intro" are present */
.fancy.intro {
  ...;
}

ID Selectors

• Add the ID attribute to the HTML element
• You define the value
• The value is the selector, starting with a # symbol
• Can only be used once per page.

<div 1d="container">
  <p>Paragraph 1 in a header.</p>
</div>
 
/* Not valid */
<section id="contalner">
  <p>Paragraph in a header.</p>
</section>

#container {
  text-align: center;
}

Descendant Selectors

Creates matching patterns based on the relationship between nested elements

<!-- Selects only the paragraphs contained within a section */
section p { ... } -->
<section>
  <p>...</p>
  <!-- this -->
</section>
<p>...</p>
 
<!-- Selects only links, inside of a paragraph, inside of section
section p a { ... } -->
<section>
  <p>There's a <a href="#">link</a> inside this paragraph.</p>
  <!-- this -->
  <p>Paragraph</p>
  <a href="#">Link</a>
</section>
<a href="#">Link</a>

<section class="container">
  <hl>Heading</hl>
  <p>Paragraph with a <span>span</span>.</p>
</section>

.container hl {
}
.container span {
}

Grouping Selectors

/* applies to all hl elements */
hl {
  ...;
}
/* applies to any element with this class */
.class {
  ...;
}
/* applies to both hl and h2 elements */
hl,
h2 {
  ...;
}
/* applies to all of these elements */
hl,
h2,
.class,
#id {
  ...;
}
 
section hl,
h2 {
}
/* expands to */
section hl {
}
h2 {
}
 
<section hl,
section h2 {
}
/* expands to */
section hl {
}
section h2 {
}

Combining Selectors

<p class="fancy intro">Fancy intro paragraph</p>

/* only applies if "fancy" AND "intro" classes are included */
.fancy.intro {
  ...;
}
 
/* applies to any element with this class */
.intro {
  color: blue;
}
/* only applies to a <p> element with this class */
p.intro {
  font-size: 15px;
}

Specificity

Specificity determines how browsers decide which CSS rule takes precedence.

1. Universal (*)
2. Element (p)
3. Class / pseudo-class (.example)
4. ID (#example)
5. Inline Styles
6. !important

* {
  color: lightblue;
}
 
p {
  color: green;
}
.example {
  color: black;
}
 
#example {
  color: purple;
}
 
section p {
  color: lightgreen; /* Won't override */
}

Specificity Calculator

https://Specificity.keegan.st

Advanced Selectors

Child Combinator (>)

Only matches to direct child element

/* descendant selector */
parent child {
}
ancestor descendant {
}
 
/* child combinator */
parent > child {
}

Sibling Combinators (+, ~)

Adjacent Sibling Combinators (+)

<section>
  <p>Sibling to heading.</p>
  <hl>Heading</hl>
  <p>Sibling to heading</p>
  <!-- adjacent sibling -->
  <p>Sibling to heading.</p>
</section>

hl + p {
}

General Sibling Combinator (~)

<section>
  <p>Sibling to heading.</p>
  <hl>Heading</hl>
  <p>Sibling to heading</p>
  <!-- general sibling -->
  <p>Sibling to heading.</p>
  <!-- general sibling -->
</section>

hl ~ p {
}

Pseudo-Class Selectors

<section>
  <p>Paragraph.</p>
  <!-- this one will display red-->
  <p>Paragraph.</p>
</section>
 
<section class="example">
  <p>Paragraph.</p>
  <!-- this one will display red-->
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <!-- this one will display green-->
</section>

a {
  color: #ffe66d;
}
 
a:hover {
  text-decoration: none;
}
 
p:first-child {
  color: red;
}
.example p:last-child {
  color: green;
}

p:first-child {
  color: red;
}
p:first-of-type {
  color: green;
}

<section>
  <p>Paragraph.</p>
  <!-- this one will display red-->
  <p>Paragraph.</p>
</section>
<section class="example">
  <hl>Heading</hl>
  <p>Paragraph.</p>
  <!-- this one will display green-->
</section>