“This is the 20th day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Past links:

“CSS Selector”

“CSS Selector (2)”

“CSS Selector (3)”

“CSS Selector (4)”

“CSS Selector (5)”

“CSS selectors (6) ::before and ::after”

“CSS Selector (7) : Empty”

preface

During our development, we should encounter the same style implemented by the same node under a parent node, such as n LI tags under a UL tag. So today we will introduce two more widely used selectors + and ~, he can also achieve the effect we said before.

+ and –

Both of them are siblings of the current node. The difference is:

  • + : for the node immediately after this node.

  • ~ is for all subsequent nodes, including those immediately after it.

The usual code format is as follows:

input:checked + div {} 
input:checked ~ div {}
Copy the code

Code implementation

Let’s take a concrete example to show the difference between the two selectors.

Let’s start with a rendering.

So just to give you a quick overview,

  • The first graph is controlled by +

  • The second figure is controlled by ~

  • The third graph is controlled by + and class

Now look at the code:

<div class="specify-selector">
  <ul class="list">
    <li>I am a resource</li>
    <li class="current">The current resources</li>
    <li>I am a resource</li>
    <li>I am a resource</li>
    <li>I am a resource</li>
  </ul>
  <ul class="list">
    <li>I am a resource</li>
    <li class="current-both">The current resources</li>
    <li>I am a resource</li>
    <li>I am a resource</li>
    <li>I am a resource</li>
  </ul>
  <ul class="list">
    <li>I am a resource</li>
    <li class="current-filter">The current resources</li>
    <li>I am a resource</li>
    <li class="filter">I am a resource</li>
    <li>I am a resource</li>
  </ul>
</div>
Copy the code
.specify-selector {
  display: flex;
  .list {
    outline: 1px solid pink;
    width: 300px;
    line-height: 2;
    font-weight: bold;
    font-size: 20px;
    color: black;
    & + .list {
      margin-left: 30px;
    }
    li {
      padding: 0 15px;
    }
    .current {
      background-color: blue;
      color: #fff;
      & + li {
        background-color: yellow;
        color: #fff; }}.current-both {
      background-color: blue;
      color: #fff;
      & ~ li {
        background-color: yellow;
        color: #fff; }}.current-filter {
      background-color: blue;
      color: #fff;
      & ~ .filter {
        background-color: yellow;
        color: #fff; }}}}Copy the code

Ok, that’s all for today, you are still the best today, Bye Bye!!