4.1. Twenty Twenty’s Main Selectors

Straight to the point! Let’s recall one more time the four main elements the theme has:

Now, with the Developer Tools, we can see the selectors for those elements in a tree; in this screenshot, all the children of body are collapsed.

Note: Please don’t mind the second DIV for the purpose of this study

To seek for selectors, you can either:

  • open the Developer Tools (at your home page for instance), collapse all the elements of body, and begin expanding all its children until you find the element you’re looking for; or
  • right click on the element you want to customize to open the DevTools and find its properties and values.

The first option, is a great way to go to understand the structure of the whole theme, as we did following “the puzzle;” but, the children will change depending on what we are looking at: what kind of post type and which template; and of course, depending on what you’ve added in the editor to your post (which is always going to be in the main element)

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.


Any thoughts?