CSS Combinators

A CSS Combinators explain the relationship between two selectors. Between the selectors, we can include a combinator. CSS Combinators use selectors to help locate content in a document. There are four different combinators in CSS:

• Descendant selector (space)

• Child selector (>)

• Adjacent sibling selector (+)

• General sibling selector (~)

Descendant Selector:

The descendant selector matches all elements that are descendants of a specified element.

div p {  background-color: yellow;}

Child Selector (>): The child selector selects all elements that are the children of a specified element.

div > p {  background-color: yellow;}

Adjacent Sibling Selector (+): The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

div + p {  background-color: yellow;}

General Sibling Selector (~): The general sibling selector selects all elements that are siblings of a specified element.

div ~ p {  background-color: yellow;}

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element. it can be used to:

• Style an element when a user mouse over it

• Style visited and unvisited links differently

• Style an element when it gets focus.

selector:pseudo-class {  property: value;}

Anchor Pseudo-classes: Links can be displayed in different ways:

/* unvisited link */a:link {  color: #FF0000;}/* visited link */a:visited {  color: #00FF00;}/* mouse over link */a:hover {  color: #FF00FF;}/* selected link */a:active {  color: #0000FF;}

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes: Pseudo-classes can be combined with CSS classes:

a.highlight:hover {  color: #ff0000;}

CSS pseudo-element:

CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element.

selector::pseudo-element {  property: value;}

The ::first-line Pseudo-element: This is used to add a special style to the first line of a text.

p::first-line {  color: #ff0000;  font-variant: small-caps;}

The ::first-line pseudo-element can only be applied to block-level elements. The following properties apply to the ::first-line pseudo-element:

• Font properties

• Color properties

• Background properties

• Word-spacing

• Letter-spacing

• Text-decoration

• Vertical-align

• Text-transform

• Whitespace

• Line-height

• Clear

Multiple Pseudo-elements: Several pseudo-elements can also be combined.

p::first-letter {  color: #ff0000;  font-size: xx-large;}
p::first-line {  color: #0000ff;  font-variant: small-caps;}

CSS - The ::before Pseudo-element: The ::before pseudo-element can be used to insert some content before the content of an element.

h1::before {  content: url(smiley.gif);}

CSS - The ::after Pseudo-element: The ::after pseudo-element can be used to insert some content after the content of an element.

h1::after {  content: url(smiley.gif);}