CSS Advanced Selectors

CSS selectors are used to select HTML elements in different-different ways. Most web designers know about common selectors they don’t have knowledge about advanced selectors of CSS, how to use advanced selectors, Where to Use Advanced Selectors.

In this blog, you will learn complete detail about CSS Advanced Selectors.

CSS Advanced selectors are mostly used in CMS (Content Management System), because in a CMS web designer can’t edit HTML Code directly then there is a need for CSS Advanced Selectors to select HTML elements.


Child Selector

In a CSS there are two selectors used to select child elements, which is following:

  • Descendant Selector
  • Direct Child Selector


Descendant Selector:  
It selects all child elements of the selected parent element.


Syntax:

Parent-element  child element
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
ul li
{
   color:#f00;
}
 
</style>
</head>
 
<body>
 
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
 
</body>
</html>


In the above example, it selects all li of ul.


Direct Child Selector(>):
It selects the direct child element of the selected parent element, it does not select sub child of an element.

Syntax:

Parent-element>child-element
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
ul>li
{
   float:left;
}
 
</style>
</head>
 
<body>
 
<ul>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
</ul>
</li>
<li>list3</li>
<li>list4</li>
</ul>
 
</body>
</html>
 


In the above example, it will select direct li of ul it will not select sub child of li element.


Siblings Selectors

Siblings selectors are used to selecting siblings of selected HTML element. There are two siblings selectors:

  • Adjacent Sibling  Selector
  • General Sibling  Selectors


Adjacent Sibling Selector (+):  
It is used to select the next element of the selected element.


Syntax:

element + element
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
 
<body>
 
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>
 
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
 
<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>
 
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
 
</body>
</html>
 

In the above example, it will select the p element that is after the div element.


General Sibling Selector (~):  
It is used to select all the next elements of the selected element.


Syntax:

element~element
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
 
<body>
 
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>
 
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
 
<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>
 
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
 
</body>
</html>
 

In the above example, it will all p element that is after div element.


Attribute Selectors

Attribute selectors are used to select HTML element by attribute, or by attribute value etc. Attribute Selectors are following:

  • [attribute]
  • [attribute="value"]
  • [attribute~="value"]
  • [attribute|="value"]
  • [attribute^="value"]
  • [attribute$="value"]
  • [attribute*="value"]


[attribute]:
It is used to select HTML elements by attribute name.


Syntax:

element[attribute]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/">Web Development Institute</a>
<a href="https://www.nextgeducation.com/" target="_blank">Next-G Education</a>
<a href="https://graphicdesigninstitutes.com/" target="_top">Graphic Design Institute</a>
 
</body>
</html>
 

In the above example, it will select a tag that has a target attribute.


[attribute="value"] :
It is used select HTML element by attribute name and its value.

Syntax:

Element[attribute="value"]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"]
{
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/">Web Development Institute</a>
<a href=https://www.nextgeducation.com/ "  target="_blank">Next-G Education</a>
<a href=https://graphicdesigninstitutes.com/"   target="_top">Graphic Design Institute</a>
 
</body>
</html>
 

In the above example, it will select a tag that has the target=”_blank” attribute.


[attribute~="value"]:
It is used to select HTML elements by attribute value with the specific word.

Syntax:

Element[attribute~=”value”]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[title~="Web"] {
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/"  title="Best Web Development Institute">Web Development Institute</a>
<a href="https://www.nextgeducation.com/"  target="_blank"  title="Best Web Design Institute">Next-G Education</a>
<a href="https://graphicdesigninstitutes.com/"  target="_top"  title="Best Graphic Design Institute">Graphic Design Institute</a>
 
</body>
</html>

In the above example, it will select a tag which title attribute contains the word Web.


[attribute|="value"]:
It is used to select HTML elements with the specified attribute starting with the specified value.

Syntax:

Element[attribute|="value"]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[class|="web"] {
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/"   title="Best Web Development Institute" class="web-development">Web Development Institute</a>
<a href="https://www.nextgeducation.com/"  target="_blank"  title="Best Web Design Institute"  class="web-design">Next-G Education</a>
<a href="https://graphicdesigninstitutes.com/" class="webdesign"  target="_top"  title="Best Graphic Design Institute">Graphic Design Institute</a>
 
</body>
</html>


[attribute^="value"]:
It is used to select HTML elements by the attribute value begins with the specific word.

Syntax:

Element[attribute^="value"]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[class^="web"] {
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/" title="Best Web Development Institute" class="web-development">Web Development Institute</a>
<a href="https://www.nextgeducation.com/" target="_blank" title="Best Web Design Institute" class="web-design">Next-G Education</a>
<a href="https://graphicdesigninstitutes.com/" class="webdesign" target="_top" title="Best Graphic Design Institute">Graphic Design Institute</a>
 
</body>
</html>


[attribute$="value"]:
It is used to select HTML elements whose attribute value ends with a specified value.


Syntax:

Element[attribute$="value"]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[class$="institute"] {
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/" title="Best Web Development Institute" class="web-development-institute">Web Development Institute</a>
<a href="https://www.nextgeducation.com/" target="_blank" title="Best Web Design Institute" class="web-design-institute">Next-G Education</a>
<a href="https://graphicdesigninstitutes.com/" class="webdesign" target="_top" title="Best Graphic Design Institute">Graphic Design Institute</a>
 
</body>
</html>


[attribute*="value"]:
It is used to select elements whose attribute value contains a specified value.

Syntax:

Element[attribute*="value"]


Example:

<!DOCTYPE html>
<html>
<head>
<style>
a[class*="we"] {
  background-color: yellow;
}
</style>
</head>
<body>
 
 
 
<a href="https://www.webdevelopmentinstitute.com/" title="Best Web Development Institute" class="web-development-institute">Web Development Institute</a>
<a href="https://www.nextgeducation.com/" target="_blank" title="Best Web Design Institute" class="web-design-institute">Next-G Education</a>
<a href="https://graphicdesigninstitutes.com/" class="webdesign" target="_top" title="Best Graphic Design Institute">Graphic Design Institute</a>
 
</body>
</html>


Pseudo Selectors

Pseudo selectors start with the following (:) character, which are following:

  • :first-child
  • :last-child
  • :nth-child(n)
  • :first-of-type
  • :last-of-type
  • :nth-of-type


:first-child selector:
 It selects the first child of the selected element, it does not match the type of an element.

Syntax:

element:first-child
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
li:first-child
{
   color:red;
}
 
</style>
</head>
 
<body>
 
<ul>
<h3>first child</h3>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
</ul>
</li>
<li>list3</li>
<li>list4</li>
</ul>
 
</body>
</html>

In the above example, it will select li of the second ul, because the first ul’s first child is h3.


:last-child selector:
 It selects the last child of the selected element, it does not match the type of an element.

Syntax:

element:last-child
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
li:last-child
{
   color:red;
}
 
</style>
</head>
 
<body>
 
<ul>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
 
</ul>
</li>
<li>list3</li>
<li>list4</li>
<h3>first child</h3>
 
</ul>
 
</body>
</html>

In the above example, it will select li of the second ul, because the first ul’s last child is h3.


:nth-child selector:
 It selects the last child of the selected element, it does not match the type of an element.

Syntax:

element:nth-child(n)
{
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
li:nth-child(4)
{
   color:red;
}
 
</style>
</head>
 
<body>
 
<ul>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
 
</ul>
</li>
<li>list3</li>
<h3>first child</h3>
 
<li>list4</li>
 
</ul>
 
</body>
</html>

In the above example, it will select li of the second ul, because the first ul’s 4th child is h3.


:first-of-type selector:
 It selects the first child of the selected element, it matches the type of an element.

Syntax:

element:first-of-type
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
li:first-of-type
{
   color:red;
}
 
</style>
</head>
 
<body>
 
<ul>
<h3>first child</h3>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
</ul>
</li>
<li>list3</li>
<li>list4</li>
</ul>
 
</body>
</html>

In the above example, it will select the first li of the selected element.


:last-of-type selector:
 It selects the last child of the selected element, it matches the type of an element.

Syntax:

element:last-of-type
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
li:last-of-type
{
   color:red;
}
 
</style>
</head>
 
<body>
 
<ul>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
 
</ul>
</li>
<li>list3</li>
<li>list4</li>
<h3>first child</h3>
 
</ul>
 
</body>
</html>
 

In the above example, it will select the last li of the selected element.


:nth-of-type selector:
 It selects nth-child of the selected element, it matches the type of an element.


Syntax:

element:nth-of-type(n)
{
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
 
li:last-of-type(4)
{
   color:red;
}
 
</style>
</head>
 
<body>
 
<ul>
<li>list1</li>
<li>Courses
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Video Editing</li>
 
</ul>
</li>
<li>list3</li>
<h3>first child</h3>
 
<li>list4</li>
 
</ul>
 
</body>
</html>
 

In the above example, it will select the 4th child of the selected element.

Categories: web designing css

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo