CSS Adjacent Sibling Selector

Ƙaramin abin girmi na ƙara na ƙaramin abin girmi na ƙara zai iya hukunta ƙaramin abin girmi na yana kusa da ƙaramin abin girmi na kanin, kuma suka ƙunshi abin girmi na yau na ƙarkashin abin girmi na yau.

Hukuntar ƙaramin abin girmi na ƙara

Idan an ba da tabarau sosai domin ƙaramin abin girmi na yana kusa da ƙaramin abin girmi na kanin, kuma suka ƙunshi abin girmi na yau na ƙarkashin abin girmi na yau, ayyukan abin girmi na ƙaramin abin girmi na ƙara (Adjacent sibling selector) zai iya amfani.

Wannan yana nufin: “Tsare ƙaramin abin girmi na yana kusa da ƙaramin abin girmi na h1, h1 da ƙaramin abin girmi na p suka ƙunshi abin girmi na yau na ƙarkashin abin girmi na yau”.

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

Ƙaramin abin girmi na yau ya ƙaddamar da haka: “Hukuntar ƙaramin abin girmi na yana kusa da ƙaramin abin girmi na h1, h1 da ƙaramin abin girmi na p suka ƙunshi abin girmi na yau na ƙarkashin abin girmi na yau”.

Try it yourself

Tumaki na Ƙirar

Ƙaramin abin girmi na ƙaramin abin girmi na ƙara ya yi amfani da karamin abin girmi na ƙara (Adjacent sibling combinator).

Rarrabawar:Kamar kuma ƙaramin abin shingen, ƙaramin abin girmi da ke kusa tare da ƙaramin yawa zai iya ƙunshi ƙaramin yawa.

Kai kai girmi ƙanamunin da yau:

<div>
  <ul>
    <li>Lista girmi 1</li>
    <li>Lista girmi 2</li>
    <li>Lista girmi 3</li>
  </ul>
  <ol>
    <li>Lista girmi 1</li>
    <li>Lista girmi 2</li>
    <li>Lista girmi 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 following 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 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.