CSS COMBINATORS

rainbow baker

 CSS COMBINATORS

    1. CSS combinators are explaining the relationship between two selectors.
    2. CSS selectors are the patterns used to select the elements for style purposes.
    3. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators.                       

There are four types of combinators available in CSS:                            

  • General Sibling selector (~)
  • Adjacent Sibling selector (+)
  • Child selector (>)
  • Descendant selector (space):
General Sibling selector (~):
            The general sibling selector is used to select the element that follows the first selector element and also shares the same parent as the first selector element.

Adjacent Sibling selector (+):
            The Adjacent sibling selector is used to select the element that is adjacent or the element that is next to the specified selector tag. 

Child selector (>):
            This selector is used to select the element that is the immediate child of the specified tag.

Descendant selector (space):
            This selector is used to select all the child elements of the specified tag

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>combinator property</title>
<style>
div+p{
color:#09900;
font-size:3.2px;
font-weight:bold;
margin:0px;
text-align:center;
}
div{
text-align:center;
}
p{
text-align:center;
}
</style>
</head>
<body>
<div>Adjacent sibling selector property</div>
<div>child div content</div>
<p>hello</p>
</body>
</html>

OUTPUT


                            Adjacent sibling selector property
 child div content
hello
Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send