CSS "properties of .x" syntax

Question

Is it possible to add additional rules to a css block when using a "{ (properties of x) }" selector?

I looked at references but I can't find anything related to "properties of x". A link would be wonderful. I tried the following two combinations, but neither worked:

.dock li { (properties of grid_2; display:inline; background-color:#666; ) }
.dock li { display:inline; background-color:#666; (properties of grid_2) }

Many thanks!

EDIT

Apparently I misread an article and thought that such a syntax existed. I thought one could create a class and let it inherit the properties of another using such syntax, which is evidently not the case.

Answer 1

CSS does not have such a feature.

Answer 2

What you are describing is not possible. I think there are two other possibilities you could maybe use. The first is, that you need to know that several styles can be applied to an element at the same time. I'll give you an example:

li { font-size: 10pt; }
.dock li { color: #ff0000; }

All list items will be formatted with a font size of 10 points and only those within an element containing the dock class will be red.

My second suggestion is that you try applying two or more classes to your HTML element, for instance:

.grid li { font-size: 10pt; }
.dock li { color: #ff0000; }

Now put the grid and dock class into your HTML, and the elements will apply both style definitions:

<ul class="grid dock"> ...

Whatever you consider best for your project: remember that the properties defined in the second style overwrite the properties of the first one (if they do not define the same properties at all, there will be no confusion).

Answer 3

Hi.. maybe your question is not too strange..

What I understand is that you want to do something like:

.a { prop1: val; prop2: val; }
.b { prop3: val; prop4: val; }
.c { .a; .b; prop5: val; prop6: val; }

You want the class .c to inherit all the properties and values of .a and .b

If this is ok, you can do that using LESS.

To use your LESS code in your sites you have different ways to do it.

First of all check the original site: LESS.org
If you are on Mac check this site: LESS APP + PLUGINS
If you are on PC the less.js plugin should be easier to implement LESS in your sites: less.js usage

Hope it helps.

Happy coding y'all! :)