Loading Please Wait...
Combinator selectors selects element based on the relationship between elements.
Descendant combinator selectors selects all the elements that are descendant of first selector. It is defined by the space (" ").
Here descendant element can be an child, sub child, and so on in the DOM tree.
Syntax: selector1 selector2
/* All list items inside <ul> element having navigation class */
/* Also select nested list items */
ul.navigation li{
color: green;
}
/* All heading class elements inside section class element. */
.section .heading{
color: green;
}
/* All content class inside body class inside container class. */
.container .body .content{
color: green;
}
Child combinator selectors selects all the elements that are direct children of the first selector. It is defined by the > symbol.
Syntax: selector1 > selector2
/* All list item inside <ul> element having navigation class */
/* Do not select nested list items */
ul.navigation > li{
color: green;
}
/* All heading class elements inside section class element. */
.section > .heading{
color: green;
}
/* All content class inside body class inside container class. */
.container > .body > .content{
color: green;
}
General sibling combinator selectors selects all the elements that are sibling of the first selector. Second element must comes after the first element (Not necessarily immediately) and both shares the same parent. Previous siblings are not selected. It is defined by the ~ symbol.
Syntax: selector1 ~ selector2
/* All paragraph followed by heading */
/* Also select paragraph if there is another element between them */
/* Paragraphs before heading are not selected */
h1 ~ p{
color: green;
}
/* All subheading class after heading. */
.heading ~ .subheading{
color: green;
}
/* All body class after container class. */
.container ~ .body{
color: green;
}
Adjacent sibling combinator selectors selects all the elements that are direct sibling of the first selector. Second element must comes immediate after the first element and both shares the same parent. It is defined by the + symbol.
Syntax: selector1 + selector2
/* All paragraph just after heading */
h1 + p{
color: green;
}
/* All subheading just after heading. */
.heading + .subheading{
color: green;
}
/* All body just after container class. */
.container + .body{
color: green;
}
Column combinator selectors selects all the elements which belongs to a column. It is defined by the || symbol. Check browser compatibility before use. Element must be a column element such as <table> element.
Syntax: selector1 || selector2
/* All td cell where col is defined as active */
col.active || td{
color: green;
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved