Categories
CSS HTML

Reasons to Learn About Advanced Selectors

Increasing Specificity

If…

  • you want to target parent elements, like a form with a clicked button
  • if you want to write less css
  • you want to target LIs, but only when they are in NAVs.
  • you want to target LIs but only in NAVs in the HEADER
  • you want to target the last li in the NAV in the HEADER
  • you want to target the third article in the section
  • you want to target every third article in the section
  • you want to target the last three items in a group
  • you want to target all links to PDFs and insert (pdf) automatically after the link
  • you want to target all links that go outside your site
  • you want to target all links that go into a particular folder in your site
  • you want to target all links that start with a particular phase (such as https://ecuad.ca/ or https://langara.ca/ )
  • you want to stripe alternating rows of tables with a background color to aid readability
  • you want to put a decorative graphic beside every h2 in a particular section
  • you want to have a drop cap in the first paragraph of the first section, or the first paragraph in all sections, etc.
  • you want to target all images whose alt attribute begins, contains, or ends with a particular value
  • you want all the articles in every second row or column of a grid to have a different background color
  • you want every fourth article to have a different layout
  • you want every seventh (or only the seventh) article to span multiple columns
  • you want all the articles after the first four to have a different layout
  • you want to put a small border underneath every h3 (ie a border that doesn’t go all the way across the block)
  • you want to put a border after every article except the last one
  • you want to target every paragraph that comes after an h3 with a class of section-title
  • etc, etc.

Avoiding Monotonous Work

Imagine you have a website with 100 pages, and you want to style the last LI in the main menu.

Imagine visiting each page and adding a class to the last LI.

Yuck.

Modifying The Work of Others

Imagine that you have a content managed site running WordPress or another CMS (content management system).

CMS platforms use themes to control the appearance, behaviour, and output of content in a database.

WordPress themes typically consist of a bunch of PHP, CSS, and JavaScript files. The PHP files are templates through which your database content is output.

You might like 98% of your site appearance and behavior, but hate 2% of the styling. In WordPress, there is an area where you can make CSS changes without editing the actual theme files.

With advanced selectors, you can overrule the styles of the theme, and increase your liking of it to 100%.

Getting Access to Things You Weren’t Given Access To…

OK, that’s a strange section title. Let me explain.

You might work for a company that allows you to publish content on their CMS (such as WordPress).

However, you most likely will not be allowed to edit the template files that output the content.

That is for security and so that someone doesn’t bring the site down because of syntax errors.

If you have access to the CSS area, which is typical of certain user roles, you can modify to varying degrees, the output of the theme.

Learning JavaScript

In JavaScript, to do anything to or with anything on the page, we need to select it. For this, we use the JavaScript methods querySelector() and querySelectorAll.

These take as an argument, in the brackets, any valid css selector. Here we are selecting the first button in the footer

const footerBtn1 = 
document.querySelector('footer button:first-of-type');

In other words, this querySelector method allows you to leverage your CSS knowledge when learning JavaScript.

Learning Emmet (Cutting Down on Monotonous Work, pt 2)

Emmet is a macro utility built into Visual Studio Code, but available as an extension for nearly any code editor.

It allows you to make simple equations to produce complex HTML.

For example, an equation like this …

section#news>article.story*10>h2.article-title{title $}+img[src="https://picsum.photos/1000/600?random=$]+p>lorem20

… will produce:

  • a section with an ID of news
  • ten child articles
  • a class of story for each article
  • inside each article: a title, a random image, and a paragraph with twenty words.

That equation uses the following css selector types:

  • class (.)
  • child (>)
  • sibling (+)
  • attribute ([src=””])

If you’re interested in learning Emmet, here’s a short Loom video series that will give you many of its most valuable tools in an hour or so.

Learning Emmet will save you many, many hours, and make your coding more consistent.