Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is syntax for selector in CSS for next element?

People also ask

How do I select the next element in CSS?

The element+element selector is used to select an element that is directly after another specific element.

What is the syntax of CSS selector?

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

What is a selector syntax?

A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML element where CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of selector name followed by the property: value pair that is defined for the specific selector.

What are the 4 CSS selectors?

A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector.


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.


You can use the sibling selector ~:

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

This selects all the p elements that come after .hc-reform, not just the first one.


no > is a child selector.

the one you want is +

so try h1.hc-reform + p

browser support isn't great


The > is a child selector. So if your HTML looks like this:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... then that's your ticket.

But if your HTML looks like this:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Then you want the adjacent selector:

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