4.2. Example: Seeking for the Post Title with the Developer Tools

In this lesson, we’re going to stick to h1.entry-title (as shown at the theme’s Demo), so that we can find an answer to the three questions we left opened in the previous section:

  • Which are the selectors for the post types posts and pages?
  • Which are the selectors for each of the templates?
  • How do we combine the selectors for post types and templates?

Properties and Values

After right-clicking on the title “Hello World,” the Developer Tools opens; we choose the “elements” tab to see three columns which, from left to right, shows us:

  • the elements in a tree, highlighting the element we’ve clicked on to inspect
  • the properties and values of this h1.entry-title; notice that in this case, it has a font-size of 8.4rem and that is for screen with a min-width of 1200px;
  • the box model

Also notice that below, there’s a second value that has been crossed out: the one for a smaller screen:

This tells us, as we’ll see in the next lesson, that the theme has declared in the style sheet different values for this selector.

If you go up and down the tree, just with the arrows of your keyboard, you’ll get to the adjacent elements, allowing you to see the Box Model of each of them and discovering those “blank spaces” we always want to get rid off.

Selector for Post Types and Categories

If we go up (from <h1>) until article, we’ll see its classes; for instance, the ones for the post type and the category.

Thus we could use:

  • .type-post h1.entry-title, and we’ll be customizing the title of single posts, on every template
  • .category-uncategorized h1.entry-title, and we’ll be customizing the title of single posts under the category Uncategorized, on every template

Selector According Templates

Then, if we go way up until we find the element body, we’ll see the selectors for the templates:

Thus if we use:

  • .post-template-default h1.entry-title, we’ll be able to customize the title of posts and pages with the default template.

Combining Selectors

Constructing the right selector is as easy as beginning with the first parent. In our example:

  • .post-template-default .type-post h1.entry-title, for the title of single posts with default template
  • and, .post-template-default .type-page h1.entry-title, for pages with default template

Now… Isn’t this extremely easy? ๐Ÿค—

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.

JOIN COMMENTS

Any thoughts?