4 Selectors in CSS and jQuery

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>