CSS pseudo-classes are used to add special effects to certain selectors.
CSS Pseudo-class (pseudo-classes) instances:
-
Hypertext links
-
This example shows how to add a different color to a hyperlink in a Document.
-
Hyperlink 2
-
This example shows how to add additional styles to Hyperlinks.
-
Hyperlinks-: Use of focus
-
This example shows how to apply to Hyperlinks: Focus Pseudo-class (not working in IE).
-
: First-child (first Sub-object)
-
This example demonstrates the use of First-child Pseudo-classes.
-
: lang (language)
-
This example shows the use of the Lang pseudo-class.
Grammar
Syntax for pseudo-classes:
Selector:pseudo-class {property:value}
CSS classes can also be used in conjunction with Pseudo-classes.
Selector.class:pseudo-class {property:value}
Anchor Pseudo-class
In CSS-enabled browsers, the different states of a link can be displayed in different ways, including: active, accessed, not accessed, and Mouseover.
a:link
{color: #FF0000}/* link * a:visited
/{color: #00FF00}/* visited * a:hover
/{color: #FF00FF}/* mouse move to link * a:active
/{color: #0000FF}/* Selected Link */
Try it yourself.
Tip: in CSS definitions, a:hover must be placed after A:link and a:visited to be valid.
Hint: in the CSS definition, a:active must be placed after a:hover to be valid.
Tip: the Pseudo-class name is not case Sensitive.
Pseudo-class and CSS classes
Pseudo-classes can be used in conjunction with CSS Classes:
A .red
: visited {color: #FF0000}<a class= " red
" href= "css_syntax.asp" >css syntax</a>
If the link in the example above is accessed, it will appear in Red.
CSS2-: First-child Pseudo-class
You can use the: first-child pseudo-class to select the first child element of an Element. This particular pseudo-class is easily misunderstood, so it is necessary to give an example. Consider the following markup:
<div> <p>These are the necessary steps:</p>
<ul> <li>Intert Key</li>
<strong>clockwise</strong>
<em>not</em>
Push the brake at the same time as the accelerator.</p></div>
In the example above, the elements as the first element include the first p, the first Li and the strong, and the EM element.
Given the following rules:
P:first-child {font-weight:bold;} Li:first-child {text-transform:uppercase;}
The first rule is set to bold as all p elements of the first child element of an Element. The second rule will be capitalized as an element (in HTML, which is definitely OL or UL Element) for all LI elements of the first child Element.
Please visit this link to view this: the effect of the First-child instance.
Tip: The most common mistake is to assume that a selector such as P:first-child chooses the first child element of the P Element.
Note: <! must be declared doctype>, so: First-child can be effective in IE.
To give you a more thorough understanding of the First-child pseudo-class, we provide 3 additional examples:
Example 1-match the first <p> element
In the following example, the selector matches the P element as the first child element of any element:
p:first-child { color:red; } </style><p>some text</p> <p>some text</p></body>
Tiy
Example 2-matches the first <i> element in all <p> elementsIn the following example, the selector matches the first <i> element in all <p> elements:
p > i:first-child { font-weight:bold; <i>text</i>
<i>text</i>
. some <i> Text</i>.</p></body>
Tiy
Example 3-match all <i> elements in the <p> element as the first child elementIn the following example, the selector matches all of the <i> elements in the <p> element as the first child element of the Element:
p:first-child i { color:blue; <i>text</i>
<i>text</i>
. </p><p>some <i>text</i>. Some <i>text</i>.</p></body>
Tiy
CSS2-: lang Pseudo class: The lang Pseudo-class gives you the ability to define special rules for different languages. In the following example, the Lang class defines the type of quotation marks for the Q element with a property value of No:
q:lang(no) { quotes: "~" "~" } lang="no"
> References in paragraphs </q> text </p></body>
Pseudo classThe "CSS1" column indicates which CSS version of the property is defined (or CSS2).
Properties |
Description |
CSS |
: Active |
Adds a style to the element being Activated. |
1 |
: Focus |
Adds a style to an element that has keyboard input focus. |
2 |
: hover |
Adds a style to an element when the mouse hovers over it. |
1 |
: Link |
Adds a style to a link that is not visited. |
1 |
: Visited |
Adds a style to the link that has been visited. |
1 |
: First-child |
Adds a style to the first child element of an Element. |
2 |
: lang |
Adds a style to the element with the specified Lang Property. |
2 |
CSS pseudo-elements (pseudo-elements)
- CSS Pseudo-class
- CSS Alignment
CSS pseudo-elements are used to set special effects to certain selectors.
Grammar
Syntax for pseudo-elements:
Selector:pseudo-element {property:value;}
CSS classes can also be used in conjunction with Pseudo-elements:
Selector.class:pseudo-element {property:value;}
: First-line pseudo-element
The "first-line" pseudo-element is used to set a special style to the first line of Text.
In the following example, the browser formats the first line of text of the P element according to the styles in the "first-line" pseudo-element:
Instance
P:first-line { color: #ff0000; font-variant:small-caps; }
Try it yourself.
Note: the "first-line" pseudo-element can only be used for Block-level Elements.
Note: The following properties can be applied to the "first-line" pseudo-element:
- Font
- Color
- Background
- Word-spacing
- Letter-spacing
- Text-decoration
- Vertical-align
- Text-transform
- Line-height
- Clear
: First-letter pseudo-element
The "first-letter" pseudo-element is used to set a special style to the first letter of the Text:
P:first-letter { color: #ff0000; font-size:xx-large; }
Try it yourself.
Note: the "first-letter" pseudo-element can only be used for Block-level Elements.
Note: The following properties can be applied to the "first-letter" pseudo-element:
- Font
- Color
- Background
- Margin
- Padding
- Border
- Text-decoration
- Vertical-align (only when float is none)
- Text-transform
- Line-height
- Float
- Clear
Pseudo-elements and CSS classes
Pseudo-elements can be used in conjunction with CSS Classes:
p.article:first-letter
{ color: #FF0000; class= "article" >this is a paragraph in an article. </p>
The above example turns the first letter of all paragraphs of class article red.
Multiple pseudo-elements
Can be used in conjunction with multiple Pseudo-elements.
In the following example, the first letter of the paragraph is shown in red and its font size is Xx-large. The remaining text in the first line will be blue and displayed in small caps. The rest of the text in the paragraph is displayed with the default font size and color:
P:first-letter { color: #ff0000; font-size:xx-large; } P:first-line { color: #0000ff; font-variant:small-caps; }
Try it yourself.
CSS2-: before pseudo element
": before" pseudo-element can insert new content in front of the content of the Element.
The following example inserts a picture in front of each
H1:before { content:url (logo.gif); }
Try it yourself.
CSS2-: after pseudo element
The ": after" pseudo-element can insert new content after the Element's contents.
The following example inserts a picture after each
H1:after { content:url (logo.gif); }
Try it yourself.
Pseudo element
The "CSS1" column indicates which CSS version of the property is defined (or CSS2).
Properties |
Description |
CSS |
: First-letter |
Adds a special style to the first letter of the Text. |
1 |
: First-line |
Adds a special style to the first line of Text. |
1 |
: Before |
Add content before the Element. |
2 |
: After |
Add content after the Element. |
2 |
CSS Pseudo-class (pseudo-classes)