CSS Pseudo Class

The CSS Pseudo class can be seen in HTML code as :pseudoclass

Actually Pseudo-classes are more common than I first thought. The behaviour of hyperlinks (anchor tags) is often controlled by this means.

/* unvisited link */
a:link {
  color: red;

/* visited link */
a:visited {
  color: green;

/* mouse over link */
a:hover {
  color: hotpink;

/* selected link */
a:active {
  color: blue;

First Child

The css for the responsive behaviour of the Fixed Bottom menu is:

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;

The :first-child selector is defined:

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

In my useage on the FBM (Fixed Bottom Menu) the first child is always visible regardless of the screen size.

The menu items on the bottom bar are all hidden except the first item if the Media Query determines that the menu will not show all items on the screen.

The last-child is the hamburger icon and that is a different class that is only visable when the screen is mobile phone sized. The function shown below modifies the className

// the function controlling the Responsive Bottom Menu
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";

The className property is set to navbar.responsive

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;

Aninmating the hamburger icon

The hamburger could be animated, see link below, but I am not sure if it is warranted.

I have done so on this page but I would need to play around with some of the css to size the animation with the rest of the menu.


External Sources

CSS Pseudo Class - January 2021