CSS Pseudo Selectors

CSS introduces both pseudo-elements and pseudo-classes. A pseudo-element acts like an extra element is in the code. A pseudo-class acts like an extra value for a class attribute.

Goal

Follow along to see how we can use CSS pseudo-elements and classes to style certain HTML elements.

Pseudo-Elements

First Letter or Line

:first-letter, :first-line

You can specify different values for the first letter or first line of text inside an element using :first-letter and :first-line.

HTML

<h1>What is a closure?</h1>

<p class="intro">
A closures is when a function can remember its lexical scope even if the function is executed outside its lexical scope.
Which means if a function is executed outside where it is declared and is using a variable declared around the function, this is a closure.
If you have been using JavaScript for a week you may have already used a closure.
</p>

<p>
Essentially what it means is that functions can refer to variables that were declared by their parent function even after that parent function returns.
This is possible because of lexical scoping.
</p>

CSS

p.intro:first-letter {
  font-size: 200%;
}

p.intro:first-line {
  font-weight: bold;
}

RESULT

What is a closure?

A closures is when a function can remember its lexical scope even if the function is executed outside its lexical scope. Which means if a function is executed outside where it is declared and is using a variable declared around the function, this is a closure. If you have been using JavaScript for a week you may have already used a closure.

Essentially what it means is that functions can refer to variables that were declared by their parent function even after that parent function returns. This is possible because of lexical scoping.

Technically these are not properties. They are known as pseudo-elements.

A pseudo-element acts like an extra element is in the code. In the case of the :first-letter and :first-line pseudo-elements, it is as if there is an extra element around the first letter or the first line which can have its own styles applied.

You specify the pseudo-element at the end of the selector, and then specify the declarations as you would normally for any other element. Selectors indicate which element the css rules applies to. Declarations indicate how the elements referred to in the selector should be styled. Here is a list of all the CSS pseudo-elements.

Pseudo-Classes

HTML

<h1>Cool Programmers: </h1>
<ul>
  <li><a href="http://colorlessenergy.github.io/">Brian</a></li>
  <li><a href="https://planeswalker1.github.io/">Daniel</a></li>
</ul>

CSS

a:link {
  color: fuchsia;
  text-decoration: none;
}

a:visited {
  color: black;
}

a:hover {
  color: fuchsia;
  text-decoration: underline;
}

a:active {
  color: purple;
}

RESULT

Cool Programmers:

A pseudo-class acts like an extra value for a class attribute. In the case of the :visited pseudo-class, which you see above, it allows you to have different styles for links that have been visited. Similarly, the :hover pseudo-class allows you to style elements differently when a user hovers over them.

Browsers show links in blue with an underline by default, and they will change the color of links that have been visited to help users know which pages they have been to. In CSS, there are two pseudo-classes that allow you to set different styles for links that have and have not yet been visited.

:link

This allows you to set styles for links that have not yet been visited.

:visited

This allows you to set styles for links that have been clicked on. They are commonly used to control colors of the links and also whether they are to appear underlined or not. In the example above, you can see that visited links are shown in a different color to help visitors know what they have already seen.

Responding to Users

:hover, :active, :focus

HTML

<input placeholder="enter an email address...">
<button>Submit</button>

CSS

input,
button {
border: 1px solid #665544;
color: #ffffff;
padding: 6px 12px 6px 12px;
}

input {
color: #cccccc;
}

input:focus {
color: #665544;
}

button:hover {
background-color: #665544;
}

button:active {
background-color: chocolate;
}

RESULT

There are three pseudo-classes that allow you to change the appearance of elements when a user is interacting with them.

:hover

This is applied when a user hovers over an element with a pointing device such as a mouse. This has commonly been used to change the appearance of links and buttons when a user places their cursor over them. It is worth noting that such events do not work on devices that use touch screens (such as a phone) because the screen is not able to tell when someone is hovering their finger over an element.

:active

This is applied when an element is being activated by a user. For example, when a button is being pressed or a link being clicked. Sometimes this is used to make a button or link feel more like it is being pressed by changing the style or position of the element slightly.

:focus

This is applied when an element has focus. Any element that you can interact with, such as a link you can click on or any form control can have focus.

Focus occurs when a browser discovers that you are ready to interact with an element on the page. For example, when your cursor is in a form input ready to accept typing, that element is said to have focus. It is also possible to use the tab key on your keyboard to move through the interactive items on a page. When pseudo-classes are used, they should appear in this order: :link, :visited, :hover, :focus, :active. Here is a list of all the CSS pseudo-classes.

conclusion

Pseudo-elements and classes are a neat way of selecting certain HTML elements. A pseudo-element acts like an extra element is in the code. It is as if there is an extra element around said element which can have its own styles applied. A pseudo-class acts like an extra value for a class attribute. In the case of the :visited pseudo-class, which you saw earlier, it allows you to have different styles for links that have been visited. Similarly, the :hover pseudo-class allows you to style elements differently when a user hovers over them. Always remember that you do not have to memorize these pseudo selectors, just be aware that they exist.

html
css
javascript
GitHub Pages

It's more fun to make web pages when we can show them off to our friends. There are a lot of ways to put our pages online, GitHub Pages is one way.

html
css
the good parts of float and clear

floats and clear are important to know because you never know when you are going to be working on legacy code.