What Is Syntax for Selector in CSS for Next Element

What is syntax for selector in CSS for next element?

This is called the adjacent sibling selector, and it is represented by a plus sign...

h1.hc-reform + p {
  clear:both;
}

Note: this is not supported in IE6 or older.

How to get the next element after the .active class

Just use the adjacent sibling selector +, you don't need the nth-child selector:

.active + li {  color: red;}

<ul>  <li class="active">Item</li>  <li>Item</li>  <li>Item</li></ul>

How do I select the next item after a target element in css?

It will not work, if you use the attribute "name" and then look for "id" in your CSS.

[id]:target { background:pink; }[id]:target + b { background:pink; }

<a id="a">A</a><b>B</b><a href="#a">Turn pink!</a>

Is there a previous sibling selector?

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

can :next-of-type be synthesized?

So it is possible, but in addition to knowing a complete list of the types of elements in the grid, and a maximum span of elements between elements of the same type, it would be really handy to have a macro-processor to generate the synthesized solution.

The snippet below deals only with two types of elements, and a maximum of 5 elements between elements of the same type, but could obviously be laboriously extended in either dimension.

      .container {        display: grid;        font-size: 30px;        grid-template-areas:          ". . ."          ". . ."          ". . .";      }      .special ~next-of-type { color: red; }      a-.special + a- { color: red; }      a-.special + :not( a- ) + a- { color: red; }      a-.special + :not( a- ) + :not( a- ) + a- { color: red; }      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }      b-.special + b- { color: red; }      b-.special + :not( b- ) + b- { color: red; }      b-.special + :not( b- ) + :not( b- ) + b- { color: red; }      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      .ordinary ~next-of-type { color: blue; }      a-.ordinary + a- { color: blue; }      a-.ordinary + :not( a- ) + a- { color: blue; }      a-.ordinary + :not( a- ) + :not( a- ) + a- { color: blue; }      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }      b-.ordinary + b- { color: blue; }      b-.ordinary + :not( b- ) + b- { color: blue; }      b-.ordinary + :not( b- ) + :not( b- ) + b- { color: blue; }      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      .surprise ~next-of-type { color: orange; }      a-.surprise + a- { color: orange; }      a-.surprise + :not( a- ) + a- { color: orange; }      a-.surprise + :not( a- ) + :not( a- ) + a- { color: orange; }      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }      b-.surprise + b- { color: orange; }      b-.surprise + :not( b- ) + b- { color: orange; }      b-.surprise + :not( b- ) + :not( b- ) + b- { color: orange; }      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }

    <h1>next-of-type synthesized</h1>    <div class=container>     <a->1</a->     <a->2</a->     <b- class="special">3</b->     <a->4</a->     <a- class="ordinary">5</a->     <a- class="surprise">6</a->     <b->7</b->     <b->8</b->     <a->9</a->    </div>

What Is Syntax for Selector in CSS for Next Element