What a CSS Pseudo Class is and how to use them

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

Actually Pseudo-classes are more common than I first thought. The behaviour of hyperlinks (anchor tags) is often controlled by this means. The Anchor pseudoclass is known and used by even the web coder when starting out but not known by its proper name.

My interest in the concept of a psuedoclass was sparked by the use of selector:first-child and selector:last-child. (:last-child as a pseudoclass selector is not actually used in the menu I discuss here).

Top

Anchor Pseudoclasses:

<style>
/* 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;
}
/style>

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;
    bottom: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.

What a CSS Pseudo Class is and how to use them

Links