DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: CSS Combinators

#css #webdev #programming #tutorial

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. 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.

CSS Code:

div p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

div > p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

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".

CSS Code:

div + p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

div ~ p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

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.

CSS Code:

selector: pseudo-class {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

/* 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;
}
Enter fullscreen mode Exit fullscreen mode

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:

CSS Code:

a.highlight:hover {
  color: #ff0000;
}
Enter fullscreen mode Exit fullscreen mode

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.

CSS Code:

selector::pseudo-element {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
Enter fullscreen mode Exit fullscreen mode

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
  • Line-height
  • Clear

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

CSS Code:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

h1::before {
  content: url(smiley.gif);
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

h1::after {
  content: url(smiley.gif);
}
Enter fullscreen mode Exit fullscreen mode

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast

Contrast Bootstrap PRO was built using the most popular CSS
framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Resources

Top comments (0)

Read next

raielly profile image

How to Fix "MySQL Shutdown Unexpectedly"

raielly -

lucpattyn profile image

Connecting LLM to a Real-World Robot

Mukit, Ataul -

rk042 profile image

Move Zeroes to the End of an Array: A Practical Guide

Rathod Ketan -

adrianbailador profile image

Part 3: C# Fundamentals: Operators and Expressions

Adrián Bailador -