CSS Tutorial 7: Sibling Selectors

We have learned about child and descendent selectors in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.
There are two types of sibling selectors, they are adjacent sibling selector and general sibling selector.

7.1 Adjacent Sibling Selector

An adjacent sibling selector only selects or matches an element that is directly after another specific element.  It uses the plus sign + to join the two elements together. The syntax is

element1+element2{ }

It means the selector targets the first element2 after any element1.

Example 7.1

We have learned about child and descendent selectors in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.
There are two types of sibling selectors, they are

adjacent sibling selector

and

general sibling selector

The Output

We have learned about child and descendent selectors in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector. There are two types of sibling selectors, they are

adjacent sibling selector

and

general sibling selector

Notice that only the first h2 element was affected by p css styling, but the second h2 element is not affected.

7.2 General Sibling Selector

A general sibling selector  selects or matches an element which maybe directly or not directly after another specific element  .  It uses the tilde sign ~ to join the two elements together. The syntax is
element1~element2{ }

Example 7.2

We have learned about

child and descendent selectors

in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.
There are two types of

sibling selectors

, they are

adjacent sibling selector

and

general sibling selector

The Output

We have learned about

child and descendent selectors

in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.
There are two types of

sibling selectors

, they are

adjacent sibling selector

, they are

general sibling selector

Notice that only the first and all subsequent h2 element were affected by p css styling.