4+1 essential CSS selectors when programming

In this post I will show you the main selectors used by me when creating a Cascading Style Sheet, in one way or another they have become essential or essential in its creation.

Did you know...? With selectors we can save a lot of work and thus avoid "inventing" names through classes or identifiers to reference or select elements.

4+1. A[href*="github.com"]

Este selector es muy útil cuando queremos aplicar diferentes estilos según la URL que referencia el enlace; por ejemplo, si quisiéramos agregar algún detalle extra como un icono al principio del enlace:

a[href*="github.com"]:before {
  content:url("github-logo.png")
}

a[href*="google.com"]:before {
  content:url("google.png")
}

And with a little more CSS we can get something like the following:

GitHub

Google

Ver ejemplo Descargar

4. A > B

This other selector known as the child selector is very useful when we want to apply different styles to different children or levels; It is widely used when creating multilevel menus like the following:

Example

For example, if we wanted to apply a style only to the li lists within the innermost ul whose main characteristic is the red background:

ul > li > ul {
   padding:10px;
   background:#F00;
}

Now part of the outermost ul style definition:

ul{
    background:#CCC;
}

Remaining as follows our example:

3. A:visited

Returning with the links, you will notice every time you visit a web page, for example in Google, they have a different color:

This selector allows you to obtain those links that have been visited and change the style; for example the color of the text:

a:visited { color: #609; }

A, B, C

This selector allows you to save many lines and redundancy of CSS code by allowing you to chain selectors and inherit the style that you have in common:

h1, h2, h3 {
  color: #FF0000;
  font-family: Arial;
}

To apply the rest of the styles to the different selectors:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

1. A:nth-child(N)

Here we have an incredible selector which allows you to select elements in order; for example, if we have the following HTML code:

<ul>
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
</ul>

It is very useful when we want to apply different styles to the cells or rows of tables, lists, etc.; It also allows you to use formulas like 2n+1 to obtain certain elements that follow a pattern; more information at: The nth-child pseudo-class in CSS.

ul.nth_numerica li:nth-child(1), 
ul.nth_numerica li:nth-child(3) {
    background: #999;
}

Conclusions

In this post we have seen some of the many selectors that exist in CSS that I consider to be the most important or essential in order of relevance or importance, but of course there are many more that can be useful depending on the objective to be achieved.

Pseudo-class

CSS

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy