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,510 points
322 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,720 points

Related Questions In CSS

0 votes
0 answers
0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
18 views
0 votes
1 answer

What is the difference between CSS and SCSS?

CSS: Cascading Style Sheets (CSS) is a ...READ MORE

answered Jun 17 in CSS by Edureka
• 8,460 points
7 views
0 votes
1 answer

What is WebKit and how is it related to CSS?

In the CSS syntax for rendering content ...READ MORE

answered Jun 17 in CSS by Edureka
• 8,460 points
5 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 8,460 points
22 views
+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,720 points

edited Jan 21, 2020 by Niroj 387 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,720 points

edited Jan 21, 2020 by Niroj 439 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,850 points
77,250 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,720 points

edited Jan 21, 2020 by Niroj 696 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP