The Lobotomized Owl selector is one of the most powerful but underused selectors in CSS. It was introduced quite recently by Adjacent Pickering in June 2014.
The characters used for the selector resemble a blank stare of the owl and hence it’s name. It is represented as
The plus sign is the Adjacent sibling selector which refers to any term or element that is positioned next to it. I have written a blog post quite recently on that.
Let’s try to dissect each part of the selector and analyze what it means. As we know the browser reads CSS from right to left. So let’s begin that way. The first term that we come across is the ‘*’ . The ‘*’ itself is a selector in it’s own capacity. It is quite commonly known as the Universal Selector. It can basically select everything in the CSS domain which includes classes , Id’s etc. The next element is the plus sign which we discussed a little while ago, the Adjacent sibling selector. And the last term is again the Universal Selector.
Now let’s combine all of them an see what it means. So once you join them, or would be something like this ‘Everything before Everything’. This basically means that it can be used or applied anywhere in the CSS stylesheet since it has got an infinite domain.
Hopefully by now you have got a broad understanding of what it means.