Page-specific Selectors

I have encouraged students to use SelectorGadget to help determine the correct CSS selector to use when modifying their websites for class. A student asked the following question:

I was curious if there was a way to de-select elements on another page?  For example, there is an h3 on the home page I want to change, but want the h3 on the resume page to stay the same.  I’m struggling with finding a way to do that!

The Challenge

This is a good challenge, with a surprisingly simple solution. It may also apply to your page or site. To further demonstrate the student’s question and the challenge it presents, here are the h3s on her home and resume pages:

About Me (index.html h3)

Resume (resume.html h3)

She wants to make About Me fuschia but keep Resume black. Writing a rule like h3 {color: #f0f;} would change the color on both pages, like so:

About Me (index.html h3)

Resume (resume.html h3)

when she wants her h3s to look like this:

About Me (index.html h3)

Resume (resume.html h3)

 The ‘Wrong’ Solution

One possible solution is to create a separate stylesheet for each page, naming them index.css and resume.css. The index.html file would only link to index.css and the resume.html file would only link to resume.css. This approach, though has two flaws:
  1. Don’t Repeat Yourself (D.R.Y.)
    • Some CSS rules will apply to all pages. For example, the header on each page should use identical colors and fonts. Using separate stylesheets for each page means repeating those rules twice — or more, depending on how many unique pages/stylesheets you use.
    • This reduces one benefit of using stylesheets: changing something, like a color, font-family, or font-size, means you now have to edit multiple files to ensure consistency among your pages.
    • The principle to remember is D.R.Y vs W.E.T. That stands for Don’t Repeat Yourself vs. Write Everything Twice. D.R.Y. is the preferred method.
  2. Additional files means additional requests. Maybe you’re thinking about ways around the W.E.T. issue and are wondering, why not link multiple stylesheets to each page?  You could link to one common stylesheet (master.css) for elements that look the same on every page like the header example above, and link each page to a unique style sheets for the individual differences. Well:
    • Each additional stylesheet means the browser has to make an additional request to the server. which raises the possibility of a loading error or, more likely, an increase in time for your page to load.

The Better, Simpler Approach

We need to tell the browser to only apply the rule to an h3 if it the h3 is on the home page. This means the browser needs to identify which page is the home page. HTML gives us an easy way to identify things: the id attribute! We can use the id attribute to identify the different pages by adding it to the index.html body element’s opening tag, like this:

 

<body id=”home”>

 

But why stop there? You should add this attribute on all of your pages so they are consistent, but also to create flexibility for other page-specific rules you may want to write. So the body element of each page should like:

<body id=”resume”>

or

<body id=”portfolio”>

or

<body id=”anyPageName”>

Now that we have added an id attribute to the each page, we can modify our original CSS rule so that it will select only h3 elements on the page identified as home:

 

#home h3 {color: #f0f;}

The home page h3 will be fuschsa, while the resume page h3 will remain black:

About Me (index.html h3)

Resume (resume.html h3)

, ,

Leave a Reply