Selectors

Contact Us or call 1-877-932-8228
Selectors

Selectors

The are several different types of selectors. The most common ones are listed below:

  • Type
  • Descendant
  • Class
  • ID

Selectors identify the element(s) affected by the CSS rule.

Type Selectors

Type selectors specify elements by tag name and affect every instance of that element type. Looking again at a previous example:

p { color: darkgreen; font-family: Verdana; font-size: 10pt; }

This rule specifies that the text of every <p> element should be dark green and use a 10-point Verdana font. As we saw in the previous example, you create type selectors in Dreamweaver by choosing "Tag" as the Selector Type in the CSS Rule dialog:

In Dreamweaver CC, you must type the beginning . or # to note a Class or ID type selector.

Descendant Selectors

Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that <strong> tags within <p> tags should have red text.

p strong { color:red; }

With descendant selectors generations can be skipped. In other words, the code above does not require that the <strong> tag is a direct child of the <p> tag.

Dreamweaver refers to descendant selectors as "Compound" selectors. To create them in Dreamweaver, you select "Compound" as the Selector Type in the CSS Rule dialog:

To illustrate:

  1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html.
  2. Place the cursor in the "wikipedia" link.
  3. In the CSS Styles panel, click the New CSS Rule icon ().
  4. Select Compound from the Selector Type options.
  5. Dreamweaver will then provide you with a descendant selector starting with the body tag:This means that this rule will affect every <a> element within a <p> element within the <body> element. It will not affect <a> elements that are not nested somewhere within <p> elements.
  6. You can use the Less Specific and More Specific buttons to change how specific your selector is. To see this, press Less Specific once. The Selector Name should change to "p a".

Steps in Dreamweaver CC

  1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html.
  2. Place the cursor in the "wikipedia" link.
  3. In the CSS Designer panel, click the New CSS Rule icon ().
  4. Dreamweaver will then provide you with a descendant selector starting with the body tag:This means that this rule will affect every 'a' element within a 'p' element within the 'body' element. It will not affect 'a' elements that are not nested somewhere within 'p' elements.
  5. Define the selector in the Properties area.

Class Selectors

In HTML, almost all elements can take the class attribute, which assigns a class name to an element. The names given to classes are arbitrary, but should be descriptive of the purpose of the class. In CSS, class selectors begin with a dot. For example, the following rule creates a class called "warning" that makes the text of all elements of that class bold and red:

.warning { font-family: Impact; font-size: large; font-weight: bold; color: #F00; }

Following are a couple of examples of elements of the warning class:

<h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p>

To create class selectors in Dreamweaver, you select "Class" as the Selector Type in the CSS Rule dialog:

To illustrate how to add a class selector in Dreamweaver:

  1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver.
  2. Place the cursor at the end of the blockquote and press Enter.
  3. Click the Outdent icon () in the Properties Inspector to get out of the blockquote.
  4. Type "Don't forget to save your work!"
  5. In the CSS Styles panel, click the New CSS Rule icon ().
  6. Select Class from the Selector Type options.
  7. Type "warning" for the Selector Name. Leave the Rule Definition set to "main.css":This rule will affect every element that has the "warning" class.

Steps in Dreamweaver CC

  1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver.
  2. Place the cursor at the end of the blockquote and press Enter.
  3. Click the Outdent icon () in the Properties Inspector to get out of the blockquote.
  4. Type "Don't forget to save your work!"
  5. In the CSS Designer panel, click the New CSS Rule icon ().
  6. Type in .warning:
  7. Define the selector in the Properties area.

Now we have to apply the class to an element on the page:

  1. Place the cursor in the warning paragraph you typed under the blockquote.
  2. Select "warning" from the Class dropdown in the Properties Inspector:
  3. Open the page in your browser by pressing F12. If you get the following prompt, click Yes. This saves the CSS file.
  4. The page should look like this:

ID Selectors

As with the class attribute, in HTML, almost all elements can take the id attribute, which is used to uniquely identify an element on the page. In CSS, ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the "maintext" id 20 pixels from the left and right.

#mainText { margin-left:20px; margin-right:20px; ] <div id="mainText"> This is the main text of the page... </div>

To create id selectors in Dreamweaver, you select "ID" as the Selector Type in the CSS Rule dialog:

ID vs. Class

Again, the id attribute is used to uniquely identify an element on a page, so no two elements may use same id.

Classes, on the other hand, can be applied to many elements on the page.

Next