Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Use the :not() Selector in CSS3

In some cases, it’s easier to select objects in CSS3 according to characteristics that they don’t have — to do this you may use a :not(selector). For example, you might want to change the formatting of every object that isn’t within a <p> tag.

In this case, you could create a list of tags using the comma selector and hope that your list is complete, or you could just use the :not() selector. For example, :not(p) selects every object that isn’t a <p> tag. You also can create complex selections using the :not() selector: A selector of :not(div>p), for instance, selects every <p> tag that doesn’t have a <div> tag as a parent.

Even with this short list of tag selectors, you can see that CSS is quite flexible when working with tags. Seeing the selectors in action will help you understand them a bit better. The following procedure shows how to use the various tags:

  1. Create the ExternalCSS.HTML and ExternalCSS.CSS files and copy them to a new folder.

  2. Open ExternalCSS.HTML.

  3. Type the following code after the existing <p> tag in the file and save the changes to disk.

     <p>Text within a DIV.</p>
      <p>Text with a DIV parent.</p>
    <p>Text after a DIV.</p>
    <p>More text after a DIV.</p>

    This code simply adds tags in specific arrangements so that you can test the various selectors. If you open the resulting file now, you see that each of the <p> tags has been automatically formatted like the original <p> tag.

  4. Open ExternalCSS.CSS.

  5. Type the following code after the existing styles and save the changes to disk.

     text-align: right;
  6. Reload the test page.

    Notice that the only <p> tag that’s been affected is the one that has the <div> tag as a direct parent. In addition, notice that the previous formatting cascades into the current formatting. You haven’t overridden any of the existing formatting, so the text appears as before — it simply uses right-justification instead of the default left-justification.

  7. Type the following code after the existing styles and save the changes to disk.

    div p
     text-decoration: line-through;
     background-color: #ff7f7f;
  8. Reload the test page.

    Notice that two lines are affected this time. In addition, the background-color style has been changed, so these two lines use the new color — it takes precedence over the original color. When you think about the cascading part of CSS, think about a stream where changes downstream take precedence over the original state of the water.

  9. Type the following code after the existing styles and save the changes to disk.

     font-family: monospace;
     font-style: italic;
  10. Reload the test page.

    Only the line that appears directly after the <div> is affected: The font has changed to a monospace font (normally reserved for code) and is italicized.

  11. Type the following code after the existing styles and save the changes to disk.

     font-weight: bolder;
     font-size: 30px;
     margin: 0px;
     color: #7f007f;
  12. Reload the test page.


Notice that both <p> tags that appear after the <div> tag are affected. The font now appears bold and is larger. The font color has also changed. Especially important in this part of the example is that setting the margin to 0px gets rid of the white space between lines.

blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.