CSS special selectors

CSS (cascading style sheet) became a vital part of modern web applications. The normal selectors are quite simple and easy and most of the developers are familiar with it.

In some cases, we need to write some special selectors and those can be tricky if we are not well aware of them. Following are some of the CSS special selectors that we should know more about.

div[role=main] {
   // Write your style here
}

// any para (p) element as long as they are following a ul element.
ul ~ p {
   color: red;
}