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
   193   194   195   196   197   198   199   200   201   202   203