Page 198 - Webapplication11_C11_Flipbook
P. 198
Class Selector
The class selector is used to select HTML items that have a specified class property. Write a dot (.) character followed
by the class name to select components with a certain class. The defined rule will apply to all components with that
class.
Example:
.center {
text-align: center;
color: blue;
}
Universal Selector
The asterisk ‘*’ represents the universal selector. All elements are selected when the * selector is used. The * selector
can also be used to select all elements that are contained within another element.
Example: Selects all elements, and sets their background colour to maroon:
* {
background-color: maroon;
}
Descendant Selectors
The descendant selector identifies all items that are descendants of a given element. Assume you want to apply a style
rule to a specific element only when it is included within another element. The style rule will only apply to the <b>
element when it is inside the <ul> tag, as seen in the following example:
ul b {
color: blue;
}
Child Selectors
CSS child selectors are used to select elements that are children of another element. If a and b are two HTML elements,
and b is within a’s starting and ending tags, then b is a child of a. Selectors must be separated using the “>” combinaton
when composing child selectors.
Example: This rule will render all paragraphs with colour blue and background white if the paragraph is directly defined
under the div tag:
div > p {
color:blue;
background: white;
}
Attribute Selector
HTML elements that contain specified properties or attribute values can be styled. To select elements with a specific
attribute, use the [attribute] selector.
Syntax:
[attr]
Denotes elements with an attribute name of attr.
196 Touchpad Web Applications-XI

