CSS is positioned between sibling elements

CSS is positioned between sibling elements

Note

* 1.css Native Selector is the fastest to find elements

* 2. Custom selector: Start, very similar to Pseudo-class in CSS

* 3. The custom selector is positioned based on the location found with the native selector

* 4. Use native selectors as much as possible to get elements

1.:nth-child (n): CSS is calculated starting from 1

$ (' Ul:nth-child (2) '). CSS (' Color ', ' red ')

2.:nth-child (2n): Select all even position elements (n=[1,2,3,...])

$ (' Ul:nth-child (2n) '). CSS (' Color ', ' red ')

3.:nth-child (2n+1): Select all odd position elements (n=[0,1,2,...])

$ (' Ul:nth-child (2n+1) '). CSS (' Color ', ' red ')

4.:nth-child (even): Gets the even position element; Nth-child (odd): get odd position element

$ (' Ul:nth-child (even) '). CSS (' Color ', ' red ')  //Even behavior Red text $ (' Ul:nth-child (Odd) '). CSS (' color ', ' green ')//odd behavior Green text

5.:nth-last-child (): Reverse calculation position

$ (' Ul:nth-last-child (2) '). CSS (' Color ', ' red ')  ///2nd, or 9th-digit $ (' ul:nth-last-child (even) '). CSS (' Color ', ' red ')  //Reverse start Select even position

6.:first-child: The first child element of a parent element

$ (' Ul:first-child '). CSS (' Color ', ' red ')

7.:last-child: The last child element of the parent element

$ (' Ul:last-child '). CSS (' Color ', ' red ')

8.:only-child: The only child element in the parent element

$ (' Ul:only-child '). CSS (' Color ', ' red ')

9.nth-of-type (), similar to Nth-child (), returning only elements of the same type

<! DOCTYPE html>