My first exposure to the Owl selector was during the Bootstrap source code days.
I didn’t know the origin of this selector at the time, but I thought the selector used by the developers was a bit trivial. The source code reads like this:
.alert-block p + p {
margin-top: 5px;
}
Line 3945 from the Bootstrap source code
The developer’s intention was to style the paragraphs in the alarm dialog with 5px intervals between them, but there was no code to style each element as I often do :not(:first-child), not just thumbs up.
It is not until reading Heydon Pickering’s article “Axiomatic CSS and Lobotomized Owls” that I learn that this selector is actually an extension of the selector *+*, which is called an owl selector because it looks like an owl.
* + * {
margin-top: 5px;
}
What do you think? Can you see that? Above we have defined a simple owl selector. After a simple analysis of this selector:
+ : Adjacent Sibling selector selects the element immediately following another element that has the same parent element.
* : wildcard, representing any element.
We can use such a concise rule to achieve spacing between adjacent child elements in a document flow.
The author summarizes the advantages of owl selector as follows:
1. Avoid unnecessary margins for the beginning and end elements
Figure (a) is the result of applying margin to all elements
Take advantage of cascading
p {
text-align: justify;
}
p + p {
margin-top: 0;
text-indent: 2em;
}
In this code, instead of defining a specific element style, we move to defining a rule, as we did in Bootstrap in the beginning. This will greatly simplify your CSS code.
Owl selector, have you started using it yet?
Please leave the temperature of your fingertips
Let the sun embrace you
Remember this is a temperature of the public number