Jquery selector nth child usage

web front end twelve thousand four hundred and seventeen 12 years ago (2012-08-29)

Everyone who works on the front end of the Web knows that, IE6 browser There are very few pseudo classes supported, but we have to apply jquery to websites frequently during the implementation of projects and to be compatible with IE6/7 browsers.

For example, to achieve the effect of interlacing and color changing of a table, the nth child attribute of CSS is incompatible with IE6/7, so we can put the nth child attribute into jquery for application, for example:

JQuery code
  1. $( function () {  

  2.   $( "tr:odd" ).addClass( "oddcss" );   

  3.   $( "tr:even" ).addClass( "evencss" );   

  4. });   

In the above example code, odd and even are two very useful selectors in jquery, representing cardinality and even number respectively. Oddcss and eventss need to define styles in CSS files respectively, which will not be illustrated here.

For nth child, make it compatible with this CSS attribute in IE6/7 browser. You can also try to use selectivizr, whose calling code is:

  1. < script   type = "text/javascript"   src = "[JS library]" > </ script >   

  2. <!-- [if (gte IE 6)&(lte IE 8)] >   

  3.    < script   type = "text/javascript"   src = "selectivizr.js" > </ script >   

  4.    < noscript > < link   rel = "stylesheet"   href = "[fallback css]"   /> </ noscript >   

  5. <! [endif]-- >   

The following is a list of 30 CSS selectors that must be mastered by the WEB front-end. Many of them are common to us, and those rarely used and unfamiliar selectors are also needed for WEB front-end personnel.


  • *: Universal Element Selector

* { margin:0; padding:0; }

*The selector is used to select all elements on the page. The code above is used to set the margin and padding of all elements to 0. The most basic method is to clear the default CSS style

*Selectors can also be applied to sub selectors, such as the following code:

#container * { border:1px solid black; }

In this way, all child label elements with ID of container are selected and border is set.

  • #ID: ID Selector

#container { width:960px; margin:auto; }

The ID selector is the most efficient selector in CSS. When using it, you should ensure the uniqueness of the ID.

  • .class Class Selector

.box { background-color:white; }

Class selectors are less efficient than ID selectors. A page can have multiple classes, and classes can be used in different tags.

  • X Y: Label combination selector

li a { font-size:12px; }

Tag combination selectors are also commonly used selectors.

  • 10: Label Selector

a { font-size:12px; }  

ul { list-style:none; }

If you just want to change a certain label style in the page, you can choose to use the label selector.

  • X:visited and X:link

a:link { color:#666; }  

a:visted { color:#000; }

Pseudo class selector, the most commonly used is the A tag.

  • X+Y: adjacent element selector

ul + p { background:#eee; }

Adjacent to the element selector, matching all the sibling elements Y immediately following the X element.

  • X>Y: Sub element selector

.box > ul { list-style:none; }

Match all child elements under. box.

  • X ~ Y:

ul ~ p { font-size:12px; }

Matches any peer P element after the X element. That is, all the elements of the same level after UL are selected.

  • X [title]: Attribute selector

a[title] { font-size:12px; }

Match the tag with a certain attribute. For example, in the instance, match the tag a with the title attribute.

  • X[href="foo"]

a[href=" https://www.toyean.com/ "] { font-size:12px; }

It also belongs to the attribute selector, which matches the label of a value in the attribute. For example, the match in the instance is href=“ https://www.toyean.com/ "While the a tags of other links are not selected.

  • X[href*="nettuts"]

a[href*="tuts"] { font-size:12px; }

It belongs to the attribute selector and matches all tags containing tuts in the href. Regular matching.

  • X[href^="http"]

a[href^="http"] { font-size:12px; }

It is similar to the above genus selection tag, but the A tag starting with http is matched regularly.

  • X[href$=".jpg"]

a[href$=".jpg"] { color:#666; }

The tag ending in. jpg in the matching attribute is also a kind of attribute selector.

  • X[data-*="foo"]

If you want to match all image links, you can use the following CSS:

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] { color:#666; }

But if we add a data filetype attribute to tag a, we can use the following CSS to quickly select the tag we need to match.

  • X[foo~="bar"]

a[data-info~="external"] { color:#666; }

a[data-info~="image"] { border:1px solid #ddd; }

Match the X element with multiple space separated values in the attribute, one of which is equal to "bar".

  • X:checked

input[type=radio]:checked { border:1px solid #ddd; }

This selector is mainly used for the checkbox. Select the checkbox as the currently selected tag.

  • X:after

.clearfix:after { content:""; display:block; clear:both; visibility:hidden; font-size:0; height:0; }  

.clearfix { *display: inline-block; _height: 1%; }

Before and after insert content before or after the selected tag, which is generally used to clear floating, but is not available for IE6 and IE7.

  • X:hover

div:hover { background:#ddd; }

The most commonly used tag is the A tag. However, in IE6 browser, except for the A tag, other tags div: over do not match. You need to introduce the hover style in jquery.

  • X:not(selector)

*:not(p) { color:#06c; }

Select a label element other than the selector in ().

  • X::pseudoElement

p::first-line { font-size:12px; font-weight:bold; }  

p::first-letter { font-size:18px; font-weight:bold; font-family:"Microsoft Yahei";  }

It is used to match the first line and the first letter of the element, respectively.

  • X:nth-child(n)

li:nth-child(3) { color:#c33; }

Match the first label in the X element. For example, the code above matches the third li label.

  • X:nth-last-child(n)

li:nth-last-child(2) { color:#c33; }

In contrast to the previous selector, this selector matches the tag number in reverse order. The code above means to match the tag number of li from the bottom.

  • X:nth-of-type(n)

ul:nth-of-type(3) { border:1px solid #c33; }

It is similar to: nth child(), but only matches elements with the same label.

  • X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border:1px solid #c33; }

It is similar to: nth last child (), but only matches elements with the same label.

  • X:first-child

ul li:first-child { font-weight:bold; }

Match the first child element of its parent element, and change the code example to the first LI label text under the UL label in bold.

  • X:last-child

ul li:last-child { font-weight:bold; }

Match the penultimate child element of its parent element, and change the code example to bold the text of the last LI label under the UL label.

  • X:only-child

div p:only-child { font-weight:bold; }

Matching the only child element under the parent element is equivalent to: first child: last child or: nth child (1): nth last child (1).

  • X:only-of-type

li:only-of-type { font-weight:bold; }

Matching the only child element with the same label under the parent element is equivalent to: first of type: last of type or: nth of type (1): nth last of type (1).

  • X:first-of-type

li:only-of-type { font-weight:bold; }

Matching the first child element with the same label under the parent element is equivalent to: nth of type (1).