Grouping Selector
If you have elements with the
same style definitions.you can
group the selectors, to minimize
the code.
To group selectors, separate each
selector with a comma.
In the example below we have grouped
the selectors from the code above:
Example
h1, h2, P
text-align: center
color: red;
Universal Selector
Rather th an selecting elements of a
specific type, the universal selector
quite simply matches the name of any
element type.
Example:
color: red;
Descendant Selector
Suppose you want to apply a style rule
to a particular element only when it lies
inside a particular element. As given in
the following example, style rule will
apply to <em> element only when it lies
inside <ul> tag.
Example
ul em{
text-align: center;
color: red;
Child Selector
You have seen the descendant
selectors. There is one more type of
selector, which is very similar to
descendants but have different
functionality.
Example
Body p{
color: #000000;
Attribute Selector
You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text
Example :
input[type = “text”]{
color: #000000;
}
The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color applied only to the desired text fields.
There are following rules applied to attribute selector:
- p[lang] - Selects all paragraph elements with a lang attribute.
- p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr".
- p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr".
- p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".