0

I'd like to have a CSS selector that returns the divs with 114, 214, and 314. I've tried the following:

$(".test div:first>div:nth-of-type(4)"));

but it only returns the div with 114. What selector would work for all three? Thanks!

<div class = "test">
<div><div>111</div><div>112</div><div>113</div><div>114</div><div>115</div><div>116</div></div>
<div><div>121</div><div>122</div><div>123</div><div>124</div><div>125</div><div>126</div></div>
<div><div>131</div><div>132</div><div>133</div><div>134</div><div>135</div><div>136</div></div>
<div><div>141</div><div>142</div><div>143</div><div>144</div><div>145</div><div>146</div></div>
</div>
<div class = "test">
<div><div>211</div><div>212</div><div>213</div><div>214</div><div>215</div><div>216</div></div>
<div><div>221</div><div>222</div><div>223</div><div>224</div><div>225</div><div>226</div></div>
<div><div>231</div><div>232</div><div>233</div><div>234</div><div>235</div><div>236</div></div>
<div><div>241</div><div>242</div><div>243</div><div>244</div><div>245</div><div>246</div></div>
</div>
<div class = "test">
<div><div>311</div><div>312</div><div>313</div><div>314</div><div>315</div><div>316</div></div>
<div><div>321</div><div>322</div><div>323</div><div>324</div><div>325</div><div>326</div></div>
<div><div>331</div><div>332</div><div>333</div><div>334</div><div>335</div><div>336</div></div>
<div><div>341</div><div>342</div><div>343</div><div>344</div><div>345</div><div>346</div></div>
</div>
Jason
  • 105
  • 13

1 Answers1

1

Use :first-child, not :first.

https://api.jquery.com/first-selector/

As of jQuery 3.4, the :first pseudo-class is deprecated. Remove it from your selectors and filter the results later using .first().

The :first pseudo-class is equivalent to :eq( 0 ). It could also be written as :lt( 1 ). While this matches only a single element, :first-child can match more than one: One for each parent.

$(".test div:first-child>div:nth-of-type(4)")
wangdev87
  • 8,611
  • 3
  • 8
  • 31