What is css Combinator

0 votes
hii, can anyone help me to explain about combinator and its type??
Feb 4, 2020 in CSS by kartik
• 37,530 points
263 views

1 answer to this question.

0 votes

hey @kartik,

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

 Generally,there are four different combinators in CSS/CSS5:

1.descendant selector (space)
2.child selector (>)
3.adjacent sibling selector (+)
4.general sibling selector (~)

Descendant Selector:
The descendant selector matches all element that are descendants of a specified element.

Example
<style type="text/css">
        div span {
          background-color:red;
          color:Blue;
        }
</style>

Child Selector:
The child selector selects all elements that are the immediate children of a specified element.

Example
<style type="text/css">
        div > span {
          font-size:20px;
          background-color:blue;
          color:red;
        }
 </style>
Selects all <span> elements that are immediate children of a <div> elements.

Adjacent Sibling Selector:
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

Example
<style type="text/css">
        div + span {
          font-size:20px;
          background-color:green;
          color:blue;
        }
 </style>
Selects all <span> elements that are siblings of <div> elements.

General Sibling Selector:
The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements: 

Example
div ~ p {
  background-color: green;
}
answered Feb 4, 2020 by Niroj
• 82,820 points

Related Questions In CSS

+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,820 points

edited Jan 21, 2020 by Niroj 286 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,820 points

edited Jan 21, 2020 by Niroj 324 views
0 votes
3 answers

Explain the difference between visibility:hidden; and display:none?

display:none means that the tag in question will ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,950 points
52,786 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,820 points

edited Jan 21, 2020 by Niroj 272 views
0 votes
1 answer

What is a css selector and where is it used?

CSS Selector is a combination of element ...READ MORE

answered Nov 21, 2018 in Data Analytics by Kalgi
• 52,370 points
202 views
0 votes
1 answer

What is HTML/CSS validation?

HTML/CSS testing is done for the verification ...READ MORE

answered Feb 14, 2019 in Selenium by Sahil
152 views
0 votes
1 answer

What is the primary difference between the XPath and CSS selector?

Hello Ushma, the primary difference between XPath ...READ MORE

answered Jun 24, 2019 in Selenium by Anvi
• 14,150 points
26,621 views
0 votes
2 answers

What is difference between Distributed search head and Search head cluster?

 A distributed environment describes the separation of ...READ MORE

answered Dec 4, 2018 in Data Analytics by Ali
• 11,330 points
765 views
0 votes
10 answers

What is the difference between Mongodb and Hadoop?

MongoDB is a NoSQL database, whereas Hadoop is ...READ MORE

answered Jun 20, 2018 in Big Data Hadoop by jenny_code
8,485 views
0 votes
3 answers

What is Hive? Is Hive a database?

Hive is a data Warehouse infrastructure/system built ...READ MORE

answered Jul 1, 2019 in Big Data Hadoop by Ved Gupta
17,507 views