CSS adjacent sibling selector

Sometime we need to define css style for adjacent sibling elements. It can be defined by using syntax E1 + E2. It will match when E2 is adjacent to E1 and have same parent. The style will apply to E2.

Example – adjacent sibling selector

In this example:

  • In box1 vertical space above h2 is reduced when it is preceded by h1
  • In box2 vertical space above h2 is default
<style type="text/css">
div {
  width:100px; background-color: lightgray;
.box1 h1 + h2 {
  margin-top: -20px;

<div class="box1">
<div class="box2">



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments