Follow Us :

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

web development institute
Recent Blogs

How to open Gmail on click of anchor tag in HTML

2022-04-23

Pagination in PHP & MySQL

2022-04-12

How to use Image in React

2022-04-09

How to use Image from Public Folder in a React

2022-04-09

React Page is not Loading Showing Exit Page or Wait

2022-04-09

Blog Categories
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 : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Request for Demo

Related Blogs

CSS Selectors Every Web Designer Should Know
Css Selectors Every Web Designer Should Know

Date: 2021-04-12

CSS selectors are an important topic of CSS define how to select HTML el...

Read More

How To Use Google Fonts In Css

Date: 2021-07-13

Fonts play an important role in design to make the design more beautiful. Example: Design of kid’s toys website...

Read More

How To Use Offline Font In Css

Date: 2021-07-15

In CSS we use Google fonts to style our website, but most of the developer wants to use font offline, we can use font off...

Read More

Animation Effects In Css

Date: 2021-08-14

In this blog, we will learn how to use animation effects on websites like animate text, animate buttons, etc. we mostly s...

Read More

Use Font Awesome Icon As Content In Css

Date: 2021-09-02

In this blog, you will learn how to use font awesome icon as content in pseudo-element property of CSS. Pseudo element is...

Read More

What Are Css Variables Explain With Example

Date: 2021-11-06

Variable is used in programming languages such as C, C++, JS, Python, etc. to hold values that have to be used in the ent...

Read More

Request For Demo