Posted inCSS

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
welcome www.pakainfo.com .....

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

Child Selector

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

Adjacent Selector

I am a Pakainfo Master

I am www.pakainfo.com #1

I am www.infinityknow.com #2

I am www.w3diy.com #3

	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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype