CSS3 Advanced Selector

Source: Internet
Author: User

Some new selectors have been added to the CSS3 that are different from the previous ones. Some of these selectors are similar to the jquery selector, which allows us to manipulate the DOM much more.

For a more intuitive understanding we use this as an example to operate

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Title</title>6 </Head>7 <Body>8     <ul>9         <Li>First Test title</Li>Ten         <Li>A second Test title</Li> One         <Li>A third Test title</Li> A         <Li>Fourth Test title</Li> -         <Li>Fifth Test title</Li> -     </ul> the </Body> - </HTML>

: Nth-of-type (n) selects each element that belongs to the nth element of its parent element.

and this is similar to: First-of-type and: Last-of-type Select the first element and the last element, respectively

DEMO:

<style>Li:nth-of-type (3){/* Select 3rd li element * /Background-color:#00b3ee;        }Li:first-of-type{/* Select the first LI element * /Background-color:#ee1200;        }Li:last-of-type{/* Select last li element * /Background-color:#00ee0f;        }
</style>

: Before add content before element content

: After to add content after element content

These two elements are similar to the following: hover but they are not mouse hover but use the content property to add the contents

It is important to note that the content added with CSS cannot be selected or be displayed as a CSS style type by JS.

DEMO:

        li:before{            Content: ' Add contents in front ';        }        li:after{            content: ' added in the back ';        }

: Focus is also similar to what we use: hover is used to dynamically select the element that gets focus

DEMO: Do not change the background color as the input box that gets the focus

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title>    <style>Input:focus{Background-color:#00b3ee;        }    </style></Head><Body>input Box 1:<inputtype= "text"><BR>input Box 2:<inputtype= "text"></Body></HTML>

: Nth-child (n) Select the nth child element of each parent element

: Nth-last-child (n) Select the nth element of each parent element from the backward forward number

: Last-child selects the last child element of each parent element

Note that this selector is used with caution because the choice of face is too big to control

DEMO:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title>    <style>: Not (P){Border:Solid Red 1px;        }    </style></Head><Body>    <Div>        <P>I'm the P element.</P>        <P>I'm the P element.</P>        <P>I'm the P element.</P>        <span>I'm not p element I'm the span element</span>        <P>I'm the P element.</P>    </Div></Body></HTML>

CSS3 Advanced Selector

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.