CSS Adjacent Sibling Selector

ສັນຍານຄົນພົມພັນລຸ່ມຄຽງຂ້າງກັນ (Adjacent sibling selector) ສາມາດກ່າວຫາວິດີຈະລົງທີ່ຢູ່ຫຼັງວິດີຈະລົງອື່ນໆ, ແລະວິດີຈະລົງທັງສອງແມ່ນມີພົມພັນລຸ່ມດຽວກັນ.

ກ່າວຫາສັນຍານພົມພັນລຸ່ມ

ຖ້າຕ້ອງການກ່າວຫາວິດີຈະລົງທີ່ຢູ່ຫຼັງວິດີຈະລົງອື່ນໆ, ແລະວິດີຈະລົງທັງສອງແມ່ນມີພົມພັນລຸ່ມດຽວກັນ, ສາມາດໃຊ້ສັນຍານຄົນພົມພັນລຸ່ມຄຽງຂ້າງກັນ.

ຕົວຢ່າງ, ຖ້າຕ້ອງການເພີ່ມລະດັບການປະກອບຫຼັງທີ່ວິດີຈະລົງ h1, ສາມາດຂຽນແບບດັ່ງກ່າວ:

h1 + p {margin-top:50px;}

ສັນຍານດັ່ງກ່າວຈະຖ່າຍວ່າ: “ການກ່າວຫາວິດີຈະລົງທີ່ຢູ່ຫຼັງວິດີຈະລົງ h1, h1 ແລະ ວິດີຈະລົງ p ແມ່ນມີພົມພັນລຸ່ມດຽວກັນ”.

Try it yourself

ການອະທິບາຍຄຳນາຍ

ສັນຍານຄົນພົມພັນລຸ່ມທີ່ໃກ້ຄຽງກັນໄດ້ນໍາໃຊ້ຕົວເກນແຕ່ງ(+) ວ່າສັນຍານພົມພັນລຸ່ມຄຽງຂ້າງກັນ.

ຄວາມເຫັນ:ຄືກັບສັນຍານພົມພັນລຸ່ມ, ທາງຂ້າງຂອງສັນຍານພົມພັນລຸ່ມອາດມີສິບປະຈຳວັດ.

ບັນຊີ: ການກ່າວຫາບັນຊີດີໂອຣັມຂອງຂັ້ນຕອນ

<div>
  <ul>
    <li>ລາຍການຢ່າງ 1</li>
    <li>ລາຍການຢ່າງ 2</li>
    <li>ລາຍການຢ່າງ 3</li>
  </ul>
  <ol>
    <li>ລາຍການຢ່າງ 1</li>
    <li>ລາຍການຢ່າງ 2</li>
    <li>ລາຍການຢ່າງ 3</li>
  </ol>
</div>

In the above snippet, the div element contains two lists: one unordered list and one ordered list, each containing three list items. These two lists are adjacent siblings, and the list items themselves are also adjacent siblings. However, the list items in the first list are not adjacent siblings with those in the second list because these two groups of list items do not belong to the same parent element (at most they can be considered cousins).

Remember, a combinator can only select the second element of two adjacent siblings. See the selector below:

li + li {font-weight:bold;}

The selector above will only make the second and third list items in the list bold. The first list item is not affected.

Try it yourself

Combine with other selectors

The adjacent sibling combinator can also be combined with other combinators:

html > body table + ul {margin-top:20px;}

This selector is interpreted as: Select all the brother ul elements that appear immediately after the table element, which is contained within a body element, and the body element itself is a child element of the html element.