Photo by Garvit Nama on Unsplash

CSS Selectors,Pseudo-selector Operators

CSS Operators

+ (Adjacent Sibling Combinator)

• Description: Selects the element that is immediately adjacent to the specified element.
• Example 1:

h1 + p {
  color: red;
}

• Explanation 1: The paragraph immediately following an <h1> element will have red text.
• Example 2:

.intro + .details {
  font-size: 14px;
}

• Explanation 2: The element with class “details” immediately following an element with class “intro” will have a font size of 14px.
• Example 3:

div + p {
  margin-top: 10px;
}

• Explanation 3: Paragraphs immediately following a <div> will have a top margin of 10px.
• Example 4:

li + li {
  border-top: 1px solid #ccc;
}

• Explanation 4: List items immediately following another list item will have a top border.
• Example 5:

input + span {
  color: blue;
}

• Explanation 5: Spans immediately following an <input> will have blue text.

> (Child Combinator)

• Description: Selects all elements that are a direct child of a specified element.
• Example 1:

ul > li {
  list-style-type: none;
}

• Explanation 1: Direct child list items of an unordered list will have no list style.
• Example 2:

div > p {
  padding: 10px;
}

• Explanation 2: Direct child paragraphs of a <div> will have 10px padding.
• Example 3:

nav > ul > li {
  display: inline;
}

• Explanation 3: Direct child list items of a direct child unordered list of a <nav> will be displayed inline.
• Example 4:

article > section > h2 {
  font-weight: bold;
}

• Explanation 4: Direct child headings of a direct child section of an article will be bold.
• Example 5:

form > label > input {
  border: 1px solid #000;
}

• Explanation 5: Direct child inputs of direct child labels of a form will have a black border.
• ~ (General Sibling Combinator)
• Description: Selects all elements that are siblings of a specified element.
• Example 1:

h1 ~ p {
  color: green;
}

• Explanation 1: All paragraph siblings of an <h1> will have green text.
• Example 2:

.info ~ .details {
  background: #f0f0f0;
}

• Explanation 2: All siblings with the class “details” following an element with class “info” will have a grey background.
• Example 3:

.container ~ .item {
  margin: 5px;
}

• Explanation 3: All siblings with class “item” following an element with class “container” will have a 5px margin.
• Example 4:

p ~ ul {
  font-size: 12px;
}

• Explanation 4: All unordered list siblings following a paragraph will have a font size of 12px.
• Example 5:

.box ~ .box {
  border: 2px solid red;
}

• Explanation 5: All siblings with class “box” following another element with class “box” will have a red border.

Pseudo-Selectors

1. :hover

Description: Applies styles when the user hovers over the element.

Example 1:

a:hover {
  color: orange;
}

• Explanation 1: Links will turn orange when hovered.
• Example 2:

button:hover {
  background-color: yellow;
}

• Explanation 2: Buttons will have a yellow background when hovered.
• Example 3:

.menu-item:hover {
  border-bottom: 2px solid blue;
}

• Explanation 3: Menu items will have a blue bottom border when hovered.
• Example 4:

img:hover {
  opacity: 0.8;
}

• Explanation 4: Images will have 80% opacity when hovered.
• Example 5:

.card:hover {
  transform: scale(1.05);
}

• Explanation 5: Cards will scale up slightly when hovered.

:first-child

• Description: Selects the first child element of a specified element.
• Example 1:

p:first-child {
  font-weight: bold;
}