CSS Descendant Selector

CSS descendant selector selects all the matching descendants of an element. The descendant selector is used when we want to style each and every element of a given type that is contained inside a given element. For example, all <p> elements that are inside a <div> element, or all <li> elements that are inside a <ul> element and so on.

To select the descendants of an element, put a white space between the parent and the descendant. For example, div p, ul li, etc.

In the example below, the descendant selector selects all the <p> elements that are inside the <div> element.

Example:

div p{
   background: yellow;
   padding: 5px;
   border: 2px solid blue;
}

In the example below, the descendant selector selects all the <li> elements that are inside a <ul> element. Try it out to see how it works:

Example:

ul li{
   background: yellow;
   margin: 5px;
}

CSS Descendant Selector Syntax

The descendant selector has the below syntax:

parent descendant{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts