Defining selectors is the next step before you can go on to create the declarations in CSS with actual properties and values. This tutorial will be going over the most simple and relatively obvious examples in defining selectors.

Constructing Selectors
Selecting Elements by Name
Selecting Elements by ID or Class
Selecting Elements by Context
Selecting Part of an Element
Selecting Link Elements Based on Their State
Selecting Elements Based on Attributes
Specify Groups of Elements
Combining Selectors

Find all current special offers on Adobe products.
Selecting Elements by ID or Class‘>

Selecting Elements by ID or Class

If you have labeled elements with an id or class you can use that criteria in a selector to apply formatting to only those elements.

To select elements to format based on their id:

1. Type #

2. With no intervening space, immediately type id, where id uniquely identifies the element to which you would like to apply the styles.

Here is an example of what this would look like in code:

<div id="music">

<h2>Music Production</h2>

<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>

<h2>Audio/Video</h2>

<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>

<h2>Interactive Media, Web, &amp; Design</h2>

<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>

After adding div#music {color: red;}to the CSS the result should look something like this: Sample

To select elements to format based on their class:

1. Type . (a period)

2. With no intervening space, immediately type label, where label identifies the class to which you would like to apply the styles.

An example of this would be adding em.music {color: red;} to the css identifying all em (italic) elements in the music div (class).

Training Videos for Web Designers
Selecting Part of an Element‘>

Selecting Part of an Element

Sometimes it may come in handy to select only the first letter or first lone of an element and apply formatting to that.

To select first line of an element type the tag, where tag is the selector for the element whose first line you would like to format. Type the semicolon and type first-line like so:

p:first-child

To select the first letter of an element type the tag, where tag is the selector for the element whose first line you would like to format. Type the semicolon and type first-letter like so:

p:first-letter
Selecting Elements Based on Attributes‘>

Selecting Elements Based on Attributes

With CSS you can also apply formatting to those elements that have a given attribute or attribute value.

1. To select element, where element is the selector for the element whose attributes are in question. (i.e. div).

div

2. Type [attribute, where attribute is the name of the attribute that an element must have to be selected. (i.e. class)

div[class

3. At this point you can choose to type ="value", if you want to specify the value that the attribute must have for its element to be selected. (i.e. music)

An alternative would be to type ~="value", to specify a value that the attribute can contain for its element to be selected. Or type | (the pipe symbol) ="value" to specify that the attributes value in order for its element to be selected. But for the purpose of this tutorial we will stick to the more simple value.

div[class="music"

4. Close with ].

div[class="music"],{color: red;}

The code and the result should be.

<div id="music">

<h2>Music Production</h2>

<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>

<div id="av">

<h2>Audio/Video</h2>

<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>

</div>

<div id="interactive">

<h2>Interactive Media, Web, &amp; Design</h2>

<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>

</div>

</div>

Sample
Combining Selectors‘>

Combining Selectors

Finally, in CSS you can combine any of the techniques that I’ve explained in order to pinpoint the elements that you’re interested in formatting.

To combine selectors:

1. Define the context of the desired element. (see Selecting Elements by Context)

div.music

2. Next, spell out the element’s name or use the wild card character (see Selecting Elements by Name)

div.music p

3. Then, specify the class or id or the desired element(s). (see Selecting Elements by ID or Class)

div music p em:

4. Next, specify the psuedo-class or psuedo-element. (see Selecting Part of an Element and Selecting Links Elements Based on Their State)

div music p em:first-letter

5. Finally, specify which attributes and values must be present for the element ot be selected. (see Selecting Elements Based on Attributes)

div music p em:first-letter {color: red;}

The Best Deals on all of your Electronic Needs from TheNerds.net!

That concludes this tutorial. For a list of all CSS tutorials click here.

For previous tutorial “Working with Style Sheets” click here. For next tutorial “Formatting with Styles” click here

Is there something wrong with this tutorial? Let me know

This page is wiki editable click here to edit this page.