CSS Combinators

Master CSS combinators to create powerful, specific selectors for targeting elements based on their relationships.

CSS combinators define relationships between selectors, enabling precise element targeting based on document structure.

Descendant Combinator (Space)

Selects all descendants (children, grandchildren, etc.).

/* All paragraphs inside article */
article p {
  color: #333;
}

/* All links inside navigation */
nav a {
  color: #007bff;
}

/* Deep nesting */
.container .sidebar .widget p {
  font-size: 14px;
}

Child Combinator (>)

Selects only direct children.

/* Only direct list items */
ul > li {
  list-style: disc;
}

/* Only direct paragraphs */
.content > p {
  margin-bottom: 1em;
}

/* Not grandchildren */
.parent > .child {
  color: red;
}
/* .parent .child .grandchild - not selected */

Adjacent Sibling Combinator (+)

Selects the immediately following sibling.

/* Paragraph immediately after h2 */
h2 + p {
  font-size: 1.2em;
  font-weight: bold;
}

/* Image after heading */
h1 + img {
  margin-top: 20px;
}

/* Button after input */
input + button {
  margin-left: 10px;
}

General Sibling Combinator (~)

Selects all following siblings.

/* All paragraphs after h2 */
h2 ~ p {
  color: #666;
}

/* All images after first image */
img ~ img {
  margin-left: 10px;
}

/* All divs after .active */
.active ~ div {
  opacity: 0.5;
}

Combining Combinators

/* Complex selections */
.container > .row + .row {
  margin-top: 20px;
}

article h2 + p ~ p {
  text-indent: 2em;
}

nav > ul > li + li {
  border-left: 1px solid #ddd;
}

Practical Examples

Article Styling

/* First paragraph after heading */
article h2 + p {
  font-size: 1.1em;
  font-weight: 500;
}

/* Subsequent paragraphs */
article p + p {
  text-indent: 2em;
}

/* All paragraphs in article */
article p {
  line-height: 1.6;
}

Form Layout

/* Labels directly before inputs */
label + input {
  display: block;
  width: 100%;
}

/* Spacing between form groups */
.form-group + .form-group {
  margin-top: 20px;
}

/* Direct children only */
nav > ul > li {
  display: inline-block;
}

/* Dropdown items */
nav li li {
  display: block;
}

/* Add separator */
nav > ul > li + li::before {
  content: '|';
  margin: 0 10px;
}

Lists

/* First level items */
ul > li {
  font-weight: bold;
}

/* Nested items */
ul li li {
  font-weight: normal;
  font-size: 0.9em;
}

/* Adjacent list items */
li + li {
  margin-top: 10px;
}

Specificity

/* More specific = higher priority */
div p { }           /* Specificity: 2 */
div > p { }         /* Specificity: 2 */
.class p { }        /* Specificity: 11 */
#id > p { }         /* Specificity: 101 */

Best Practices

Combinator Best Practices

Use child combinator (>) to limit scope
Avoid deeply nested selectors (max 3-4 levels)
Prefer classes over complex combinators
Use adjacent sibling (+) for layout spacing
Document complex combinator chains
Test in different HTML structures
Consider maintainability
Use general sibling (~) for state changes

Common Patterns

Spacing Between Elements

/* Vertical spacing */
.stack > * + * {
  margin-top: 1rem;
}

/* Horizontal spacing */
.inline > * + * {
  margin-left: 1rem;
}

First/Last Child Alternative

/* Using adjacent sibling instead */
.item + .item {
  margin-top: 10px;
  /* All items except first */
}

/* Top level */
.menu > li {
  display: inline-block;
}

/* Submenu */
.menu li > ul {
  display: none;
  position: absolute;
}

.menu li:hover > ul {
  display: block;
}

Master combinators to write precise, efficient CSS selectors!

CSS combinators define relationships between selectors, enabling precise element targeting based on document structure.

Descendant Combinator (Space)

Selects all descendants (children, grandchildren, etc.).

/* All paragraphs inside article */
article p {
  color: #333;
}

/* All links inside navigation */
nav a {
  color: #007bff;
}

/* Deep nesting */
.container .sidebar .widget p {
  font-size: 14px;
}

Child Combinator (>)

Selects only direct children.

/* Only direct list items */
ul > li {
  list-style: disc;
}

/* Only direct paragraphs */
.content > p {
  margin-bottom: 1em;
}

/* Not grandchildren */
.parent > .child {
  color: red;
}
/* .parent .child .grandchild - not selected */

Adjacent Sibling Combinator (+)

Selects the immediately following sibling.

/* Paragraph immediately after h2 */
h2 + p {
  font-size: 1.2em;
  font-weight: bold;
}

/* Image after heading */
h1 + img {
  margin-top: 20px;
}

/* Button after input */
input + button {
  margin-left: 10px;
}

General Sibling Combinator (~)

Selects all following siblings.

/* All paragraphs after h2 */
h2 ~ p {
  color: #666;
}

/* All images after first image */
img ~ img {
  margin-left: 10px;
}

/* All divs after .active */
.active ~ div {
  opacity: 0.5;
}

Combining Combinators

/* Complex selections */
.container > .row + .row {
  margin-top: 20px;
}

article h2 + p ~ p {
  text-indent: 2em;
}

nav > ul > li + li {
  border-left: 1px solid #ddd;
}

Practical Examples

Article Styling

/* First paragraph after heading */
article h2 + p {
  font-size: 1.1em;
  font-weight: 500;
}

/* Subsequent paragraphs */
article p + p {
  text-indent: 2em;
}

/* All paragraphs in article */
article p {
  line-height: 1.6;
}

Form Layout

/* Labels directly before inputs */
label + input {
  display: block;
  width: 100%;
}

/* Spacing between form groups */
.form-group + .form-group {
  margin-top: 20px;
}

/* Direct children only */
nav > ul > li {
  display: inline-block;
}

/* Dropdown items */
nav li li {
  display: block;
}

/* Add separator */
nav > ul > li + li::before {
  content: '|';
  margin: 0 10px;
}

Lists

/* First level items */
ul > li {
  font-weight: bold;
}

/* Nested items */
ul li li {
  font-weight: normal;
  font-size: 0.9em;
}

/* Adjacent list items */
li + li {
  margin-top: 10px;
}

Specificity

/* More specific = higher priority */
div p { }           /* Specificity: 2 */
div > p { }         /* Specificity: 2 */
.class p { }        /* Specificity: 11 */
#id > p { }         /* Specificity: 101 */

Best Practices

Combinator Best Practices

Use child combinator (>) to limit scope
Avoid deeply nested selectors (max 3-4 levels)
Prefer classes over complex combinators
Use adjacent sibling (+) for layout spacing
Document complex combinator chains
Test in different HTML structures
Consider maintainability
Use general sibling (~) for state changes

Common Patterns

Spacing Between Elements

/* Vertical spacing */
.stack > * + * {
  margin-top: 1rem;
}

/* Horizontal spacing */
.inline > * + * {
  margin-left: 1rem;
}

First/Last Child Alternative

/* Using adjacent sibling instead */
.item + .item {
  margin-top: 10px;
  /* All items except first */
}

/* Top level */
.menu > li {
  display: inline-block;
}

/* Submenu */
.menu li > ul {
  display: none;
  position: absolute;
}

.menu li:hover > ul {
  display: block;
}

Master combinators to write precise, efficient CSS selectors!

CoderrShyam

CSS Combinators

Descendant Combinator (Space)

Child Combinator (>)

Adjacent Sibling Combinator (+)

General Sibling Combinator (~)

Combining Combinators

Practical Examples

Article Styling

Form Layout

Navigation

Lists

Specificity

Best Practices

Common Patterns

Spacing Between Elements

First/Last Child Alternative

On this page

CoderrShyam

CSS Combinators

Descendant Combinator (Space)

Child Combinator (>)

Adjacent Sibling Combinator (+)

General Sibling Combinator (~)

Combining Combinators

Practical Examples

Article Styling

Form Layout

Navigation

Lists

Specificity

Best Practices

Common Patterns

Spacing Between Elements

First/Last Child Alternative

On this page