Advanced Selectors in CSS

CSSWeb DevelopmentFront End Technology

The Advanced Selectors in CSS includes Adjacent Sibling selector, attribute selector, direct child selector, nth-of-type selector, etc. It also includes General Sibling Selector, an example is shown below:

h1 ~ h3

Example of direct child selector −

div > span

Following is the code showing advanced selectors in CSS −


 Live Demo

#red {
   color: red;
.green {
   background: green;
ul:nth-of-type(1) {
   background: rgb(0, 174, 255);
ul + h3 {
   border: 4px solid rgb(19, 0, 128);
a[href=""] {
   font-size: 25px;
h1 ~ h3 {
   font-size: 40px;
div > span {
   background-color: DodgerBlue;
<h1>Advanced Selectors Example</h1>
<span>Text sample</span>
Paragraph Text
<span>span text</span>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</p>
<a href=""></a>
<a href="" target="_blank"></a>


The above code will produce the following output −

Updated on 11-May-2020 10:39:38