CSS Rule and Type Selector
In general form CSS rule is:
selector { property: value; }
To set several properties to the same selector (בורר) in a single rule:
selector {
property1: value1;
property2: value2;
property3: value3;
}
Example:
In the example the rule is applied to all elements of a specific type, which is HTML tag <h1>. This tag is a selector.
HTML tag selector is called Type Selector.
Frequently, a sub-set of the elements of the same type may require specific styling. For example we would like to set some of <p> paragraphs with different color than other <p> paragraphs.
This page explains more about the selectors that you can use in CSS rules.
In addition to tag names (type selectors), you can use attribute values in selectors. This allows your rules to be more specific.
Two attributes (מאפיינים) have special status for CSS. They are class and id selectors.
Class selectors
Use the class attribute in an element to assign the element to a named class. It is up to you what name you choose for the class. Multiple elements in a document can have the same class value. In your stylesheet, type a full stop (period) before the class name when you use it in a selector.
Example:
See MDN Class Selectors for additional information.
HTML:
<p class="key"> some paragraph text <p>
CSS:
.key {
color: green;
}
More than one class may be used in one declaration. The classes are separated by space.
Example:
HTML:
<p class="color-item bold-item"> some paragraph text <p>
CSS:
.color-item {
color: green;
}
.bold-item {
font-weight: 900;
}
ID selectors
Use the id attribute in an element to assign an ID to the element. It is up to you what name you choose for the ID. The ID name must be unique in the document. In your stylesheet, type a number sign (hash) before the ID when you use it in a selector.
See MDN ID Selectors for more information.
Example:
HTML:
<p id="principle"> some paragraph text <p>
CSS:
#principal {
font-weight: bolder;
}
We can define both class and id attributes in the same element.
Example:
HTML:
<p class="key" id="principal"> some paragraph text <p>
If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector.
An ID selector is more specific than a class selector, which in turn is more specific than a type selector.
Grouping the Rules
Instead of using for example three separate rules:
h1 {font-family: arial;}
h2 {font-family: arial;}
h3 {font-family: arial;}
you can group them together:
h1, h2, h3 {font-family: arial;}
Combining Selectors
You can also combine selectors, making a more specific selector.
For example, the selector .key selects all elements that have the class name key. The selector p.key selects only <p> elements that have the class name key.
HTML:
<p class="key" id="principle"> some paragraph text <p>
CSS:
p.key {
font-style: italic;
}
p#principle {
font-weight: bolder;
}
Universal selectors
An asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. For instance, *.warning and .warning are considered equal.
See MDN Universal Selectors for more information.
Example:
CSS:
* {color: cyan;}
Given this rule, no element can possibly inherit the color of its parent, because the above example explicitly sets the color of every element to cyan. Hyperlinks, for example, will be cyan along with everything else.
Try for example to add red color property to the body. All elements will stay still cyan.
Example:
CSS:
div.danger * {color: red;}
Any element within any div element with class danger, will have red color,unless the element has its own color definition (but no inheritance is done).
Attribute selectors
You are not restricted to the two special attributes, class and id. It is possible to do a selection based on whether an element has an attribute and whether that attribute has a specified value. It is done by using square brackets.
See MDN Attribute Selectors for more information.
Examples:
HTML:
<p dir="rtl"> some paragraph text <p>
CSS:
p[dir="rtl"] {
font-weight: bolder;
}
The selector p[dir="rtl"] selects all elements that have a dir attribute with the value rtl.
CSS:
h1[class] { color:blue; }
h1[class="main"] { color:red; }
The first example will set to blue all h1 elements that have a class attribute. All h1 elements that have the class set exactly to main will be red.
Selectors based on relationships
CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific. These selectors are called combinators.
Examples:
CSS:
h1 em { color: green; }
p em { color: red; }
div p em { background: blue; }
The emphasised text within an h1 element would be green while those in paragraphs would be red unless the paragraph resided within a div element, in which case the emphasised text would have a blue background.
CSS:
h1 > em { color: green; }
p > em { color: red; }
div > p > em { background: blue; }
In this case em must be the direct child!
The following table summarizes some of the relationships.
| Selectors | Selects |
|---|---|
| A E | Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.) |
| A > E | Any E element that is a child (i.e. direct descendant) of an A element |
| E:first-child | Any E element that is the first child of its parent |
| B + E | Any E element that is the next sibling of a B element (that is: the next child of the same parent) |
Pseudo-classes and Pseudo-elements Selectors
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not). To see a complete list of selectors, visit CSS3 Selectors working spec.
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.
Some of the selectors are:
- :visited
- :active
- :hover
- :focus
- :first-child
- :last-child
- :nth-child
- ::selection
- ::after
- ::before
- ::first-letter
See MDN Pseudo-Class Selectors for more information.
Example:
CSS:
selector:pseudo-class {
property: value;
}
Conflicts
Two or more conflicting CSS rules are sometimes applied to the same element. What are the rules in CSS that resolve the question of which style rule will actually be used when a page is rendered by a browser? The answer is, “it’s complicated".
More specific rule has higher priority.
If the stylesheet has conflicting rules and they are equally specific, then CSS gives priority to the rule that is later in the stylesheet.
When you have a problem with conflicting rules, try to resolve it by making one of the rules more specific, so that it has priority. If you cannot do that, try moving one of the rules nearer the end of the stylesheet so that it has priority.
CSS Selectors Reference
See W3C for most precise information on CSS selectors.