On JQ pseudo class method

In addition to four mouse state pseudo class selectors, in addition to target, jQuery supports them, which is also called filter selector in jQuery
1.first-child
E: First child first e element (this e element must be the first child of the parent element)
2.first-of-type
E:first-of-type
The first E-type element (this e-element is not necessarily the first child of the parent element)
3.last-child
E: Last child last e element (this e element must be the last child of the parent element)
4.last-of-type
E: Last of type element of the last E type (this e element is not necessarily the last child of the parent element)
5.nth-child(n)
Select the nth child element (from front to back)
n is from 1
E: Nth child (n) selects the nth e element.
li:nth-child(2n) {color:red}
li:nth-child(2n+1) {color:red}
Li: nth child (even) {color: ා F00;} / even/
li:nth-child(odd){color:purple; }/ odd/
6.nth-of-type(n)
E: Nth of type (n) select the nth E-type element
7.nth-last-child(n)
E:nth-last-child(n)
Select the nth child element (from back to front)
8.nth-last-of-type(n)
E:nth-last-of-type(n)
9.only-child
It's a parent box with only one child

<style>
    ul li:only-child {
        color: red;
    }
</style>
<ul>
    <li>1111111111</li>
</ul>
<ul>
    <li>2222222</li>
    <li>33333333</li>
    <li>4444</li>
</ul>

10.only-of-type
There is only one E-type child element in the parent box, and there can be multiple child elements in the parent box

<style>
    ul li:only-of-type {
        color: red;
    }
</style>
<ul>
    <p>pppp</p>
    <p>ppppp</p>
    <li>1111111111</li>
</ul>

11.empty
Select element E without any child elements, including the text node

<style>
    div p:empty {
        height: 25px;
        border: 1px solid #ccc;
        background: red;
    }
</style>
<div>
    <p>11111</p>
    <p></p>
    <p>33333</p>
</div>

12.:enabled
Select the available elements in the form
input:enabled{color:red}
13.:disabled
Select disabled elements in the form
input:disabled{color:red}

<style>
    input[type="text"]:enabled {
        border: 2px solid blue;
        background: greenyellow;
        color: #000;
    }

    input[type="text"]:disabled {
        border: 2px solid black;
        background: orangered;
        color: #fff;
    }
</style>
<input type="text" value="Available status" />
<input type="text" value="Disabled state" disabled="disabled" />

14.:checked
Select the selected radio or checkbox element in the form
input:checked{color:red}

<style>
    input:checked+span {
        background: #f00;
    }

    input:checked+span:after {
        content: " I was chosen";
    }
</style>

<label><input type="radio" name="colour-group" value="0" /><span>blue</span></label>
<label><input type="radio" name="colour-group" value="1" /><span>gules</span></label>

15.:focus
Select the input element to get focus

<style>
    input:focus {
        background: #f6f6f6;
        color: #f60;
        border: 1px solid #f60;
        outline: none;
    }
</style>
<input value="full name" />
<input value="Company" />

16.E:not(selector)
Match element E without selector selector

<style>
    .test :not(p) {
        color: red;
    }
</style>
<div class="test">
    <p>11111</p>
    <p>22222</p>
    <span>Love to learn</span>
</div>
<style>
    ul li:not(:last-child) {
        border-bottom: 1px solid red;
    }
</style>
<ul>
    <li>11111</li>
    <li>2222</li>
    <li>333333</li>
</ul>
<style>
    div p:not(.abc) {
        color: red;
    }
</style>
<div>
    <p>1111</p>
    <p class="abc">222</p>
    <p>33333</p>
</div>

Tags: Javascript JQuery

Posted on Thu, 04 Jun 2020 08:15:26 -0700 by sqlmc