Coder Perfect

What is the CSS syntax for a selector for the next element?


If I use the h1 class=”hc-reform”> header tag, title

    margin:10px 0px;

After that, I have a paragraph titled “stuff here” (p>stuff here/p>).

How can I ensure that every p> element that follows the h1.hc-reform uses the following CSS: clear:both;

would that be:

h1.hc-reform > p{

That isn’t functioning for some reason.

Asked by tony noriega

Solution #1

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

h1.hc-reform + p {

This feature is not available in Internet Explorer 6 or earlier.

Answered by Josh Stodola

Solution #2

The sibling selector can be used as follows:

h1.hc-reform ~ p{

This chooses all of the p elements following. Not just the first one, but all of them.

Answered by Stephan Muller

Solution #3

A child selector is no >.

+ is the one you’re looking for.

as a result, try h1.hc-reform + p

There isn’t a lot of browser support.

Answered by Moin Zaman

Solution #4

A child selector is indicated by the > symbol. If your HTML looks something like this:

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

…then you’ve got yourself a ticket.

If, on the other hand, your HTML looks like this:

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

Then you’ll need the selector next to it:

h1.hc-reform + p{

Answered by Richard JP Le Guen

Solution #5

No, not at all. “Any p precisely one level beneath h1.hc-reform” implies “any p exactly one level beneath h1.hc-reform.”

h1.hc-reform + p is what you’re looking for. Of course, this may cause issues in previous versions of Internet Explorer; if you want to make the page compatible with older IEs, you’ll have to either manually add a class to the paragraphs or use JavaScript (for example, in jQuery, you could write $(‘h1.hc-reform’). next(‘p’). addClass(‘first-paragraph’)). or for further information.

Answered by Justin Russell

Post is based on