The selector of generalized related elements
In the next few paragraphs, I want to take a closer look at the selector of generalized related elements (or ~) and the area of its possible application.
At the writing of this article I was prompted by the low prevalence of information about him.
The main task of the selector of generalized related elements is the choice of the element (s), coming after the given element, and having a common parent with it.
This is indicated like this:
A ~ B {style} , where A and B are the string values that define the selector. style - the properties used.
Example
HTML:
CSS:
As a result, the h2 headings will turn red; they have a common parent element with the h1 header, and in the code they stand after it.
')
Demo .
If the element will be higher than the original, then it will not be selected.
It should be remembered that only elements that have a common parent with the original one are selected, and not those that have just a common ancestor. This is well illustrated by the second example.
Example
HTML:
CSS:
Demo .
As a result, nothing is highlighted in red, because the parent of the span element is p, and the h1 element is article.
In order for the span to turn red, you must either move it out of the paragraph one level from h1, or do so:
CSS:
Demo .
In my opinion, the selector “A ~ B” manifests all its usefulness in conjunction with the events of the elements, such as: hover,: focus, etc.
If earlier it was possible to change the style of an element only by hovering the mouse over it, then using the selector of generalized related elements allows you to change the style of an element other than the one on which the event occurred.
Symbolically (in the case of: hover) it looks like this:
A: hover ~ B {style} , where A is the element that the mouse is pointing over and new style rules apply to B.
Example
HTML:
CSS:
Demo .
As a result, the blocks will turn green when you hover over the inscription.
Now let's go ahead and assign different classes to the elements.
Example
HTML:
Demo .
You can use it like this:
HTML:
Demo
A very interesting effect can be achieved in conjunction with the new features of CSS3. For example, in the example below, the transition property is used.
Example
HTML:
Demo
As you can see, the selector of generalized related elements has a sufficient number of interesting applications. Recently, CSS has advanced far and allows you to implement what was previously possible only with the use of JavaScript.
But still, in my opinion, if we draw analogies, CSS is a mechanical component (if you like, “iron”) which is not intended to build logic. JavaScript, for example, can act as “software.”
So, in this article I tried to uncover the topic of the selector of generalized related elements. It turned out or not, to judge you.
And lastly (hover in the sun)
At the writing of this article I was prompted by the low prevalence of information about him.
What it is?
The main task of the selector of generalized related elements is the choice of the element (s), coming after the given element, and having a common parent with it.
This is indicated like this:
A ~ B {style} , where A and B are the string values that define the selector. style - the properties used.
Example
HTML:
<article> <h1></h1> <h2> 1</h2> <p> </p> <h2> 2</h2> <span> , span</span> </article> CSS:
h1~h2 { color:red; } As a result, the h2 headings will turn red; they have a common parent element with the h1 header, and in the code they stand after it.
')
Demo .
If the element will be higher than the original, then it will not be selected.
It should be remembered that only elements that have a common parent with the original one are selected, and not those that have just a common ancestor. This is well illustrated by the second example.
Example
HTML:
<article> <h1></h1> <h2> 1</h2> <p> </p> <h2> 2</h2> <p> <span> , span, </span> </p> </article> CSS:
h1~span { color:red; } Demo .
As a result, nothing is highlighted in red, because the parent of the span element is p, and the h1 element is article.
In order for the span to turn red, you must either move it out of the paragraph one level from h1, or do so:
CSS:
h1~p span { color:red; } Demo .
Use with: hover
In my opinion, the selector “A ~ B” manifests all its usefulness in conjunction with the events of the elements, such as: hover,: focus, etc.
If earlier it was possible to change the style of an element only by hovering the mouse over it, then using the selector of generalized related elements allows you to change the style of an element other than the one on which the event occurred.
Symbolically (in the case of: hover) it looks like this:
A: hover ~ B {style} , where A is the element that the mouse is pointing over and new style rules apply to B.
Example
HTML:
<body> <span> </span> <div> №1</div> <div> №2</div> </body> CSS:
div{ width:100px; height:50px; margin:5px; background:gray; } span:hover~div{ background:green; } Demo .
As a result, the blocks will turn green when you hover over the inscription.
Now let's go ahead and assign different classes to the elements.
Example
HTML:
<body> <span class="span1"> №2 </span> <br/> <span class="span2"> №1 </span> <div class="block1"> №1</div> <div class="block2"> №2</div> </body> CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .span1:hover~.block2{ background:green; } .span2:hover~.block1{ background:blue; } Demo .
You can use it like this:
HTML:
<body> <span class="spanRed"> </span> <br/> <span class="spanBlue"> </span> <br/> <span class="spanGreen"> </span> <div class="block"></div> </body> CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .spanRed:hover~.block{ background:red; } .spanBlue:hover~.block{ background:blue; } .spanGreen:hover~.block{ background:green; } Demo
Animating
A very interesting effect can be achieved in conjunction with the new features of CSS3. For example, in the example below, the transition property is used.
Example
HTML:
<body> <span class="right"></span> <span class="left"></span> <span class="top"></span> <span class="down"></span> <br/> <div class="block"></div> </body> CSS: span{ position:absolute; display:block; width:100px; height:50px; margin:10px; background:silver; cursor:pointer; } .left{ top:12%; } .right{ top:12%; left:40%; } .top{ left:20%; } .down{ top:25%; left:20%; } .block{ position:absolute; top:50%; right:50%; width:100px; height:50px; margin:5px; background:gray; -webkit-transition:all 2s ease; -o-transition:all 2s ease; -moz-transition:all 2s ease; } .right:hover~.block{ right:10%; } .left:hover~.block{ right:90%; } .top:hover~.block{ top:10%; } .down:hover~.block{ top:90%; } Demo
As you can see, the selector of generalized related elements has a sufficient number of interesting applications. Recently, CSS has advanced far and allows you to implement what was previously possible only with the use of JavaScript.
But still, in my opinion, if we draw analogies, CSS is a mechanical component (if you like, “iron”) which is not intended to build logic. JavaScript, for example, can act as “software.”
So, in this article I tried to uncover the topic of the selector of generalized related elements. It turned out or not, to judge you.
And lastly (hover in the sun)
Source: https://habr.com/ru/post/150720/
All Articles