CSS and Combinators


css CSS and Combinators Css Combinators

CSS and combinators

Css combinators show the relationship between selectors

Types of combinators

-Descendant selector -Child selector -Adjacent sibling selector -General sibling selector

Descendant selector

If space between two selectors is use(div h1) then these selectors is known as descendant selector. Following example select only those h1 which are inside the div.

Example <style> div h1{ font-style: italic; color:purple; } </style> <body> <div> <h1> Descendant selector is used </h1> <h1> Descendant selector is used </h1> <h1> Descendant selector is used </h1> </div> <p> css not apply elow heading is</p> <h1> This heading is outside the div </h1> </body>

Child Selector

The sign > indicates child selector. This selector select the immediate child of define element or first element such as div

Example <style> div > p { font-style:bold; background-color:green; } </style> <body> <div> <p> This paragraph is immediate child of div </p> <p> This paragraph is immediate child of div </p> <b> <p> This paragraph is not a immediate child of div </p> </b> </div> <p> This paragraph is outside the div</p> <p> This paragraph is outside the div </p> </body>

Adjacent Sibling Selector

This selector apply on those elements which have same parent and rapidly following after parent. In following example only those paragraph get selected that are immediately following after Div.

Example <style> div + p { font-style: bold; color:blue; } </style> <body> <div> <p> Paragraph No1 </p> <p> Paragraph No2 </p> </div> <p> After div first paragraph ,You can say that this paragraph immediately following div </p> <p> I am not selected! </p> <div> <p> I am a paragraph </p> <h2> Adjacent Sibling </h2> <p> I am not selected </p> </div> <p> After div first paragraph, Adjacent Sibling Selector also apply on me!</p> <p>I am not selected!</p> </body>

General Sibling selector

This sign (~) indicate the General Sibling selector and placed between two elements (div~p). In General Sibling selector all paragraph element get selected after div,immediately following case is not in this. Any element after this sign ~ you write like this (div ~ a) a get selected.

Example <style> div ~ p { font-style: bold; color:blue; } </style> <body> <div> <p> Paragraph No1 </p> <p> Paragraph No2 </p> </div> <p> I am a first paragraph after first div </p> <p> I am a second paragraph after div </p> <div> <p> paragraph in a div </p> <h2> General Sibling selector </h2> <p> paragraph in a div </p> </div> <p> I am a first paragraph after second div </p> <p> I am a second paragraph after second div </p> </body>
css Css Combinators Chapter Next »