ankitweblogic logo
W e b t u t o r i a l s

CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS3 Combinators

A Combinators explains the relationship between the selectors. There are four different combinators in CSS3:
1. Descendant Selector
2. Child Selector
3. General Sibling selector
4. Adjacent Sibling selector

1. Descendant Selector - The descendant selector matches all elements that are descendants of a specified element. If you want a given style to be applied on element with in another element than Contextual Selector or Descendant Selector is used. For example, whenever the <p> tag occur inside a <div> tags, the background color changes to yellow. You can declare the style as:

<html>
   <head>
      <style>
         div p {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Paragraph 1 in the div.</p>
         <p>Paragraph 2 in the div.</p>
         <span><p>Paragraph 3 in the div.</p></span>
      </div>
      <p>Paragraph 4. Not in a div.</p>
      <p>Paragraph 5. Not in a div.</p>
   </body>
</html>

Output:

2. Child Selector - The child selector selects all elements that are the immediate children of a specified element.

div > p {
   background-color: yellow;
}

3. General Sibling selector - The general sibling selector selects all elements that are not in a specified element.

div ~ p {
   background-color: yellow;
}

4. Adjacent Sibling selector - The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. "Adjacent" means "immediately following".

div + p {
   background-color: yellow;
}