css nested classes – How to create a nested class selector?

css nested classes – A style rule can be directly nested within another style rule if its selector is nest-prefixed. We can very easily define nested rules in LESS.

css nested classes

Nested classes are one of the blessings of dynamic CSS. You can use any CSS selector while nesting with spaces.You’ll write your CSS more quickly.

How to create a nested class selector?

.section4 .welcome {
  color: greem;
}

//HTML Code
<div class="section4">
  <custom-element class="custom-class">
    <span class="welcome">welcome www.pakainfo.com</span> .....
  </custom-element>
</div>

Grouping and Nesting CSS Selectors

Grouping

h1 {
		color: green;
	}
	h2 {
		color: green;
	}
	.highlight {
		color: green;
	}
	

h1, h2, .highlight {
		color: green;
	}

Nesting

Descendant Selector

main p {
		font-size: 1rem;
	}
	footer p {
		font-size: 0.75rem;
	}
	

main p {
		font-size: 1rem;
	}
	header p, footer p {
		font-size: 0.75rem;
	}

Don’t Miss : CSS Multiple Classes

Read Also:  FullCalendar - Vuejs Event Calendar Component

Child Selector

	main > p {
		font-size: 1rem;
	}
	header > p {
		font-size: 0.75rem;
	}
	

Adjacent Selector

<h2>I am a Pakainfo Master</h2>
	<p>I am www.pakainfo.com #1</p>
	<p>I am www.infinityknow.com #2</p>
	<p>I am www.w3diy.com #3</p>

	h2 + p {
		font-size: 135%;
	}

I hope you get an idea about css nested classes.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.