Advance Selector!

Alright, global style changes are cool for simple pages, but as your pages get more complex, you’ll need more control. Luckily CSS has more tricks up its sleeve. On this page, you’ll learn 3 simple methods to target ANY object(s) on your page.  We do this with three new CSS Selector tips. Here we go:

Tip 1: To select a pattern: Use Selector Chains

If you have any patterns in your html, you can target them with Selector Chains.  The easiest example would be if you wanted to apply a CSS rule only on the list items <li> under an ordered list <ol>, but NOT an unordered list <ul>.  To do that in our CSS file, we’d simply list the parent tag, then the child tag, creating a Selector Chain like so:

ol li{

font-size: 21px;

}

This translates to “we want to change the font size of all LI tags under the OL tag”.  You can technically chain an unlimited number of selectors together, as seen below, but most pages are just not that complex.

p h1 ul li{

font-size: 21px;

}

Tip 2: To select an arbitrary element:  Use Id

If there is ONE specific element on the page that you want to add CSS styles to, you can use the ID attribute mentioned back in the HTML lesson. For example, say we want to BOLD just the first paragraph on index.html. We’d do the following 2 steps:

  1. In your index.html file, locate the first p tag and add an ID attribute to it
  2. In your CSS file, create a new rule using the special ID selector syntax TAG#IDNAME

And here are those changes in action:

Inside index.html:

<p id="first_paragraph">This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>

Inside style.css:

p#first_paragraph{

font-weight: bold;

}

Notes:

Tip 3: To select a group of elements: Use Class

Very similar to the Id attribute is the Class attribute. Whereas with Ids, you can only select one element, Classes are designed to affect multiple elements. In addition, you can give an element multiple classes so it can take multiple rules! Class based CSS rules use the syntax .CLASSNAME or TAG.CLASSNAME (if you want to limit a class to a certain tag). So let’s see this in action.

Inside index.html:

<h2 class="indent blue">This is the page title</h2>
<p class="smal">This is the first paragraph</p>
<p class="indent small">This is the second paragraph</p>
<p class="blue">This is the third paragraph</p>
<p class="small indent blue">This is the fourth paragraph</p>

Inside style.css:

.blue{

color: #0000ff;

}

.small{

font-size: 10px;

}

p.indent{

text-indent: 30px;

}

Actual Result:

This is the page title

This is the first paragraph

This is the second paragraph

This is the third paragraph

This is the fourth paragraph

Notes:

We’ve now got the power to select anything on the page. But it seems kinda inefficient to have to select every element on the screen. Even with classes, there must be a better way. There is, and it’s on the next page.

Prev page: Common CSS Properties
Next page: Making Groups