شبه کلاس ()nth-child: در CSS

:nth-child() Pseudo-class

شبه کلاس ()nth-child: در CSS عناصری در یک گروه خویشاوند را بر حسب موقعیت آنها هدف می گیرد.

css

/* در لیست را هدف میگیرد <li> دومین عنصر */
li:nth-child(2) { 
  background-color: green;
}

/* چهارمین عضو در میان تمام گروها را هدف می گیرد */
:nth-child(4n) {
  display: none;
}

شبه کلاس ()nth-child: تنها یک متغییر می پذیرد و بر حسب آن موقعیت عنصر مورد نظر را هدف قرار می دهد. مبنای موقعیت از شماره 1 شروع می شود.

مقادیر با استفاده از واژه

odd عناصری را که موقعیت آنها در گروه عناصر خویشاوند فرد باشد را هدف می گیرد.

/*  اعضا فرد گروه خویشاوند را انتخاب می کند */
div:nth-child(odd) {
   color: blue;
}

even عناصری را که موقعیت آنها در گروه عناصر خویشاوند زوج باشد را هدف می گیرد.

/*  اعضا زوج گروه خویشاوند را انتخاب می کند */
div:nth-child(even) {
   color: blue;
}

در مثال زیر عملکرد سودو کلاس ()nth-child: را مشاهده میکنیم:

html

<div class="one">
  <ul>
    <li>یک</li>
    <li>دو</li>
    <li>سه</li>
    <li>چهار</li>
  </ul>
  <ol>
    <li>پنج</li>
    <li>شش</li>  
    <li>هفت</li>
    <li>هشت</li>
  </ol>
  <i>که اولین فرزند والد خود هستند 'li' عناصر</i>
  
</div>

<div class="two">
  <ul>
    <li>یک</li>
    <li>دو</li>
    <li>سه</li>
    <li>چهار</li>
  </ul>
  <ol>
    <li>پنج</li>
    <li>شش</li>
    <li>هفت</li>
    <li>هشت</li>
  </ol>
  <i>انتخاب کردن سومین فرزند از دومین گروه عناصر</i>
</div>

<div class="three">
  <ul>
    <li>یک</li>
    <li>دو</li>
    <li>سه</li>
    <li>چهار</li>
  </ul>
  <ol>
    <li>پنج</li>
    <li>شش</li>
    <li>هفت</li>
    <li>هشت</li>
  </ol>
  <ul>
    <li>نه</li>
    <li>ده</li>
    <li>یازده</li>
    <li>دوازده</li>
  </ul>
  <i>انتخاب کردن 3 فرزند از گروه عناصر فرد</i>
</div>

css

body {
  padding: 1em 2em;
  text-align: right;
}

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  color: #fff;
  font-family: "segoe ui";
}
div {
  width: 12em;
  float: left;
  margin-right: 3em;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one li:nth-child(1) {
  background: lightsteelblue;
}

.two :nth-child(2) :nth-child(3) {
  background: lightsteelblue;
}

.three :nth-child(odd) li:nth-child(-n+3) {
  background: lightsteelblue;
}



div:before {
  font-family: monospace;
  white-space: nowrap;
  font-size: 12px;
}

.one:before {
  content: "li:nth-child(1)";
}
.two:before {
  content: ":nth-child(2) :nth-child(3)";
}
.three:before {
  content: ":nth-child(odd) li:nth-child(-n+3)";
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.