lundi 17 juin 2019

Using :not pseudo with adjacent sibling combinator (+)

My intention is to get more information on the matter.

I have tried the following pattern;

:not(element) + element {
  margin-bottom: 1rem;
}

so let us say that we have something like;

<h1>Header</h1>

<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>

Now I want to select the "parent" or the sibling before the <ol></ol>, that being our <ul></ul>. By applying the pattern I shared, I should be able to select not the <ol></ol> but the <ul></ul> correct?

:not(ul) + ul {
  margin-bottom: 1rem;
}

Has anyone seen this before? or experimented and had any success without using JQuery or any Javascript?

Aucun commentaire:

Enregistrer un commentaire