Html

CSS Combinators It explains the relation between multiple or single selector.

There are four major combinators that we would be looking at here.

Descendant Selector It selects all the elements present inside another specified HTML element.

Example

<title>Css Combinators</title>
<style>
div p{
color: red;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
<p>Come CodeWithMe</p>
<section><p>
Have a nice Day
</p></section>
</div>
</body>

Child Selector It selects only the first generation descendants of a specified element.

Example

div > p {
color: wheat;
background-color: rebeccapurple;
}

Adjacent Sibling Selector As the name suggests this selector only selects the adjacent element to the specified element.

Example

div + p {
color: wheat;
background-color: rebeccapurple;
}

General Sibling Selector Unlike the adjacent selector, this one is going to select all the <p> tags present after <div>.

CSS

CSS Introduction

CSS Selectors

CSS Color

CSS Background

CSS Border

CSS Margin

CSS Padding

CSS Box Model

CSS Text

CSS Font

CSS Link

CSS List

CSS Overflow

CSS Display

CSS Combinators

CSS Pseudo-classes

CSS Navigation Bar

CSS Hover

CSS Z-index

CSS Media Queries

CSS Shadow

CSS 2D Transform

CSS Animations

CSS Button

CSS FlexBox

CSS Grid

CSS Pagination

Example

<title>Css Combinators</title>
<style>
div p{
color: red;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
<p>Come CodeWithMe</p>
<section><p>
Have a nice Day
</p></section>
</div>
</body>

Example

div > p {
color: wheat;
background-color: rebeccapurple;
}

Example

div + p {
color: wheat;
background-color: rebeccapurple;
}

Example

div ~ p {
color: wheat;
background-color: rebeccapurple;
}

CSS Combinators

Example

<title>Css Combinators</title> <style> div p{ color: red; background-color: blue; } </style> </head> <body> <div> <p>Hello World</p> <p>Come CodeWithMe</p> <section><p> Have a nice Day </p></section> </div> </body>

Example

div > p { color: wheat; background-color: rebeccapurple; }

Example

div + p { color: wheat; background-color: rebeccapurple; }

Example

div ~ p { color: wheat; background-color: rebeccapurple; }

<title>Css Combinators</title>
<style>
div p{
color: red;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
<p>Come CodeWithMe</p>
<section><p>
Have a nice Day
</p></section>
</div>
</body>

div > p {
color: wheat;
background-color: rebeccapurple;
}

div + p {
color: wheat;
background-color: rebeccapurple;
}

div ~ p {
color: wheat;
background-color: rebeccapurple;
}