What is css Combinator?

0 votes
hii, can anyone help me to explain about combinator and its type??
Feb 4 in CSS by kartik
• 10,990 points
65 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 by Niroj
• 22,110 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 in Web Development by Niroj
• 22,110 points

edited Jan 21 by Niroj 67 views
+1 vote
1 answer

What is css box module?

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

answered Jan 20 in Web Development by Niroj
• 22,110 points

edited Jan 21 by Niroj 55 views
0 votes
1 answer

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

hii, visibility:hidden; and display:none are totally different used ...READ MORE

answered Jan 20 in Web Development by Niroj
• 22,110 points
358 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 in Web Development by Niroj
• 22,110 points

edited Jan 21 by Niroj 52 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
• 51,850 points
96 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
61 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 23, 2019 in Selenium by Anvi
• 14,050 points
9,221 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 3, 2018 in Data Analytics by Ali
• 10,670 points
326 views
0 votes
10 answers

What is the difference between Mongodb and Hadoop?

Apart from the similarity that they are ...READ MORE

answered Dec 6, 2018 in Big Data Hadoop by Deeraj
4,632 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
11,518 views