please give me nested CSS example and Explain.

Recommended Answers

All 11 Replies

Member Avatar

Lazy so-and-so - look it up like the rest of us.

CSS that is in your html code rather than a seperate file.

@michael.james.90475 - No, that's called inline CSS.

Nested CSS is at the moment only possible with a CSS preprocessor, but it might be in the future eventually possible within pure CSS.

http://tabatkins.github.io/specs/css-nesting/

Member Avatar

That's 'embedded'. Nested usually means "selectors within selectors" - often used to avoid classitis.

Okay, to be more precise then :)

'embedded' CSS is CSS between style tags in the <head>

<head>
<title>Document Title</title>
<style type="text/css">

div { background-color: blue }

</style>
</head>

'inline' CSS is CSS within style tags straight into the HTML tag

<div style="background-color: blue">

    <!--- content here -->

</div>

How nested CSS, which doesn't exist as a standard, but can be used if you write your CSS with a preprocessor such as SASS or LESS, (might) look like, is shown in the link I posted.

Member Avatar

@GM - I was responding to MJ. We must have posted at the same time.

@diafol - I thought so, but was not sure. :)

Member Avatar

And yes I agree the term has been used in CSS preprocessing too. Another thing I'm going to have to get to grips with, heh heh.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

@diafol - using a CSS preprocessor will save you time for sure on large scale projects, but after compiling your mixins, extends and nesting, it can do more harm then good to your CSS architecture (code duplication, tight coupling and specificity).

Member Avatar

Yes, I've used LESS for some time and have started using SASS. I'm not keen on them, but they do speed up development. Shame SASS is tied to RoR.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.