HTML and CSS Reference
In-Depth Information
Objective 4.5: Find elements using CSS selectors
and jQuery
Objective 1.2, “Write code that interacts with UI controls,” covered the use of document selec-
tors to find HTML elements by their unique name. In this section, you explore more advanced
techniques to find elements through the use of CSS selectors and jQuery.
This objective covers how to:
Define element, style, and attribute selectors
Choose the correct selector to reference an element
Find elements by using pseudo-elements and pseudo-classes
Deining element, style, and attribute selectors
CSS uses selectors that you define in a CSS file or style block to identify which elements in a
webpage the defined styles should be applied to. This can be done by specifying the element
itself as the selector. For example, the following CSS is an element selector for the div element:
div{
}
Any div within scope of the declaration will have the styles applied to it. Another possible
selector is a class selector. To use a class selector, you define a custom class name in the CSS
file. This can be any name prefixed with a period. Then, any element that has that class as-
signed to it via the class attribute will have the defined styles applied. For example:
.mycustomclass{
….
}
Another way to use CSS to select specific elements on the page is to use attribute selec-
tion. This is achieved by specifying an element type followed by a specific attribute. For
example if you have a web form that needs to be filled in, you may attribute required fields
with a red border around the textboxes. The following code achieves this for any elements
that have the required attribute specified:
input[required] {
border: 1px red solid;
}
There are other possibilities for the use of attribute selectors. These are outlined in
Table 4-12.
 
 
 
Search WWH ::




Custom Search