Role of CSS selector
In this article, we will discuss how CSS selector is important while we are designing the web page. The role of CSS selector in the responsive web page is very important. Let us discuss one by one.
Role of Child Selector: In Child Selector, properties of any element is the immediate parent of another element.
Syntax:
if article > p
It defines that the paragraph element is a direct child of the article, then the CSS selector properties will be applicable.
html
<!DOCTYPE html><html><head> <style> /* In child selector any article element whose immediate parent is a section element. */ section > article { color: green; font-size: 16px; } /* In child selector any h2 element whose immediate parent is a section element. */ section > h2 { color: green; } </style></head><body> <h1>Child Selector</h1> <section> <h2>Subheading 1</h2> <!-- Applicable to Subheading 1 because h2 is direct child of section here. --> <div> <article> In this example, article is not the direct child and ARTICLE which is inside DIV, which is inside SECTION. In CSS properties of child, selector will not apply in this section. </article> </div> </section> <h2>Subheading 2</h2> <section> <article> In this example ARTICLE as a direct child of the SECTION element. In CSS properties of child, selector will directly apply in this section. </article> <!-- Not applicable for Subheading 2, because h2 is not direct child of section here. --> </section></body></html> |
The output of the above code verifies if the child CSS selector properties are applicable to section elements.
Output:
Role of Descendant Selector: The CSS selector properties of the descendant selector are applicable to every level or parent element.
Syntax:
section li
It defines that “li” is the child but at any level it also considers only “li” element in section element and properties will be applicable.
html
<!DOCTYPE html><html><head> <style> /* In this Descendant selector, properties will be applicable to all "li" elements that are inside section element. */ section li { color: green; } </style></head><body> <h1>Descendant Selector</h1> <section> Table of contents: <ul> <li>Article 1</li> <li>Article 2</li> <li>Article 3</li> </ul> </section> <article> Shopping List: <ul> <li>Cookies</li> <li>Cake</li> <li>Pie</li> </ul> </article></body></html> |
Output:
Please Login to comment...