1. Pseudo-Class (pseudo-classes)
CSS Pseudo-classes are the effects that are used to add some selectors. The effect of mouse on and click is changed.
Syntax: Selector:pseudo-class{property:value;}
CSS class: Selector.class:pseudo-class{property:value;}
(1) Anchor Pseudo-class
1 A:link{Color:#FF0000;}/*non-visited links*/2 a:visited{Color:#00FF00;}/*links that have been visited*/3 a:hover{Color:#FF00FF;}/*Mouse over link*/4 a:active{Color:#0000FF;}/*Selected Links*/
Note : a:hover must be in order to see the effect after A:link and a:visited.
Note : a:active must be behind a:hover.
Note : the name of the pseudo-class is not case-sensitive.
Css:first-child pseudo-ClassYou can use the: First-child pseudo-class to select the first child element of a parent element.
Note: Prior versions of IE8 must be declared <! Doctype>, this way: First-child can take effect.
<! DOCTYPE html>{ color:blue;} </style>some text. </p><p>this is some text.</p><p><b> note:</b> for: First-child works in IE8 and earlier versions of the browser! DOCTYPE must have declared .</p></body>The selector matches the <p> element change as the first child element of any element.
Or the first I under the first p.
P > i: First-child { color:blue; }
p, so I
P: First-child i { color:blue; }
CSS-: lang pseudo class<body><p>i am a <i>strong</i> man. I am a <i>strong</i> man.</p><p>i am a <i>strong</i> man. I am a <i>strong</i> man.</p><p><b> note:</b> When: First-child acts on IE8 and earlier browsers, DOCTYPE Must already be defined .</p></body>
: The lang pseudo-class gives you the ability to define special rules for different languages
Note: IE8 must declare <! Doctype> to support; Lang pseudo-class.
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: "~" "~";}CSS-: Focus Pseudo-class<p>some text <q lang= "No" >a quote in A paragraph</q> Some text.</p><p> in this example: Lang defines the value of the Q element as Lang = "No" </p>
Input:focus { background-color:yellow;}All CSS pseudo-classes/elements<form action= "demo-form.php" method= "Get" >first Name: <input type= "text" name= "FName"/><br>last Name: <input type= "text" name= "lname"/><br><input type= "Submit" value= "Submit"/></form>
| Selector | SelectorExample | Example Description |
|---|---|---|
| : Checked | Input:checked | Select all the selected form elements |
| :d isabled | Input:disabled | Select all disabled Form elements |
| : Empty | P:empty | Select all P elements that have no child elements |
| : Enabled | Input:enabled | Select all enabled form elements |
| : First-of-type | P:first-of-type | Select each parent element is the first p child element of the P element |
| : In-range | Input:in-range | Select values within the specified range of elements |
| : invalid | Input:invalid | Select all elements that are not valid |
| : Last-child | P:last-child | Selects the last child element of all P elements |
| : Last-of-type | P:last-of-type | Select each P element is the last P element of its parent element |
| : Not (selector) | : Not (P) | Select all elements other than P |
| : Nth-child (N) | P:nth-child (2) | Selects the second child element of the parent element of all P elements |
| : Nth-last-child (N) | P:nth-last-child (2) | Selects the second child element of all P-element reciprocal |
| : Nth-last-of-type (N) | P:nth-last-of-type (2) | Select the second child of P for all P-element reciprocal |
| : Nth-of-type (N) | P:nth-of-type (2) | Select all P elements the second is a child element of P |
| : Only-of-type | P:only-of-type | Select all elements that have only one child element as P |
| : Only-child | P:only-child | Select all P elements that have only one child element |
| : Optional | Input:optional | Select element attributes without "required" |
| : Out-of-range | Input:out-of-range | Select element properties for values outside the specified range |
| : read-only | Input:read-only | Select element properties for read-only properties |
| : Read-write | Input:read-write | Select an element property without a read-only attribute |
| : Required | Input:required | Select the element property specified with the "required" property |
| : Root | Root | Select the root element of the document |
| : Target | #news: Target | Select the currently active #news element (click the name of the URL containing the anchor) |
| : Valid | Input:valid | Select Properties for all valid values |
| : Link | A:link | Select All not visited links |
| : Visited | a:visited | Select all the links you have visited |
| : Active | A:active | Select Active link |
| : hover | A:hover | Put the mouse on the link state |
| : Focus | Input:focus | Select element input with focus |
| : First-letter | P:first-letter | Select the first letter of each <p> element |
| : First-line | P:first-line | Select the first line of each <p> element |
| : First-child | P:first-child | Selector matches the <p> element of the first child element that belongs to an arbitrary element |
| : Before | P:before | Insert content before each <p> element |
| : After | P:after | Insert content after each <p> element |
| : lang (language) | P:lang (IT) | Select a start value for the <p> element's lang attribute |
1. Pseudo-Elements (pseudo-classes)
CSS pseudo-elements are special effects that are used to add some selectors.
GrammarSyntax for pseudo-elements:
selector:pseudo-element {property:value;}CSS classes can also use pseudo-elements:
selector.class:pseudo-element {property:value;}:first-line pseudo-elementThe "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:
{ color:#ff0000; font-variant:small-caps;}The "First-letter" pseudo-element is used to set a special style to the first letter of the text:
{ color:#ff0000; font-size:xx-large;}Note:"First-line" "first-letter" pseudo-elements can only be used for block-level elements.
Note: The following properties can be applied to the "First-line" "first-letter" pseudo-element:
Pseudo-elements can be combined with CSS classes:
P. Article:first-{color: #ff0000;} <class="ARTICLE"> Article paragraph </p>
": 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
{ content:url (smiley.gif);}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 (smiley.gif);}| Selector | SelectorExample | Example Description |
|---|---|---|
| : Link | a:link | Select All not visited links |
| : Visited | a:visited | Select all the links you have visited |
| : Active | a:active | Select Active link |
| : hover | a:hover | Put the mouse on the link state |
| : Focus | input:focus | Select element input with focus |
| : First-letter | p:first-letter | Select the first letter of each <p> element |
| : First-line | p:first-line | Select the first line of each <p> element |
| : First-child | p:first-child | Selector matches the <]p> element of the first child element that belongs to an arbitrary element |
| : Before | p:before | Insert content before each <p> element |
| : After | p:after | Insert content after each <p> element |
| : lang (language) | p:lang(it) | Select a start value for the <p> element's lang attribute |
Pseudo-class and pseudo-elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
