Web Coding & Development All-in-One For Dummies
Book image
Explore Book Buy On Amazon
Both CSS and jQuery save you oodles of time by making it easy to format and program page elements. These two technologies become even more powerful when you use selectors to specify which elements you want to work with:
  • The class selector: If you’ve used the class attribute to assign a class name to one or more page elements, you can target those elements by using a class selector:
CSS:

.<em>class-name</em> {

<em> property1</em>: <em>value1</em>;

<em> property2</em>: <em>value2</em>;

etc.

}

HTML:

<<em>element</em> class="<em>class-name</em>">

jQuery:

$('.class-name')

  • The id selector: If you’ve used the id attribute to assign an ID to a page element, you can target that element by using an id selector:
CSS:

#id-name {

<em>property1: value1;</em>

<em>property2: value2;</em>

etc.

}

HTML:

<element id="id-name">

jQuery:

$('#id-name')

  • The descendant selector: To target every element that’s contained within (that is, is a descendant of) a specified ancestor element, use the descendant selector:
CSS:

<em>ancestor</em> <em>descendant</em> {

<em> property1</em>: <em>value1</em>;

<em> property2</em>: <em>value2</em>;

etc.

}

jQuery:

$('ancestor descendant')

  • The child selector: To target every element that resides one level below (that is, is a child of) a specified parent element, use the child selector:
CSS:

<em>parent ></em> <em>child</em> {

<em> property1</em>: <em>value1</em>;

<em> property2</em>: <em>value2</em>;

etc.

}

jQuery:

<em>$('parent > child')</em>

About This Article

This article is from the book:

About the book author:

Paul McFedries is a true renaissance geek. He has been a programmer, consultant, database developer, and website builder. He's also the author of more than 90 books including top sellers covering Windows, Office, and macOS.

This article can be found in the category: