
##    
### Overview

In CSS, we use the **`selector`** to select some specific element(s) from all the existing elements. We then style these element(s) according to our requirements. 

We don't have the feature of a parent selector, but we can achieve this in two ways:

- Use level 3 specs for selectors

- Use specs for current CSS selectors 

### Syntax for level 3 specs

<body>
<div class="Login">
<img alt="img" src="path of the image">
</div>
</body>
.page div
{
  property: value;
}
.page div img 
{
  property: value;
}

.nav-link::parent 
{
  property: value;
}

### Example

The following code shows how to implement the CSS parent selector.

<html>
 <body>
    <h1> Parent Selector</h1>
    <p>The selector in CSS is used to select some specific elements from all the existing elements and then we can style those elements according to our needs or requirements. So, the parent is nothing more than a selector of the parent which means that it is basically the top element of all the inner elements present. In short, there is no feature like a parent selector as it creates performance issues.</p>
    <div class="parent">
    <div class="selector"></div>
    </div>
 </body>
</html>

.parent 
{
    width: 400;
    height: 400px;
    background: rgb(0, 0, 0);
}
.parent, .selector 
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.selector 
{
    cursor: pointer;
    background: rgb(87, 253, 117);
    width: 50%;
    height: 50%;
}
/*When we move the cursor on to child element then immediately parent background color changes*/
.parent 
{
    background: rgb(34, 150, 233);
    pointer-events: none;
}
.parent:hover 
{
    background: rgb(214, 255, 103);
}
.parent
.selector 
{
pointer-events: auto;
}
h1
{
    color:rgb(153, 0, 255);
    text-align: center;
}
p
{
    color: rgba(0, 0, 0, 0.634);
    border: 3px solid rgb(72, 208, 92);
    font-size: 15px;
}

codemirror

### Explanation

#### HTML

- Lines 1-9: We create a heading, and then some content is written in the div. Next, we call the parent and selector class. 


#### CSS

- Line 1-6: We set the parent class's height, width, and background color.

- Line 7-19: We set the properties of the parent and selector class and defining the background color. 

- Line 20-45: We set the properties so that when we move the cursor to the child element, then the background color of the parent changes.

How to make a parent selector in CSS

Overview

Syntax for level 3 specs

Syntax for current CSS selectors

Example

Explanation

HTML

CSS