how can i make a css class with other

Question

i have class call "example1" this class defines a background, and i want to create another class call "example2" to uses the same background on each <li> of class called "example1" how can i make it. My goal it's use the class like this

<ul class="example2">
    <li>some text</li>
    <li>another text</li>
</ul>

i tried like this

example2, .example1 li{

}

but it doesn't work Thansk for your help

UPDATE

I modified the question because my question it not was what i want. I want to use the same background of example1 in each <li> of example 2

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

You can't apply the concept of inheritance for CSS classes as we do in OOP. See this question as I think it's the same thing you want to do. One way to use a single background declaration is:

.example1, .example1 li { /* define only the background here */ }
.example1 { /* everything but the background */ }
.example2 { /* anything */ }

EDIT: If you are going to use CSS3, then you can use SASS. Good luck with IE for that matter. That's one navigator I learned to hate over the years.

edited May 23 '17 at 11:48

Community

1
1

answered Jun 25 '11 at 20:14

planestepper

3,277
26
38

hi and thanks for asking i modified the question because i have a mistake redacting the question – Jorge Jun 25 '11 at 20:43

Jaques le Fraque · Answer 2 · 2011-06-25T20:22:22.550

1

Use .class for classes in css

.example2, .example1 li{

}

You just forgot to add a dot in front of your example2-class

edited Jun 25 '11 at 20:22

answered Jun 25 '11 at 20:13

Jaques le Fraque

523
1
5
12

ju5tu5 · Answer 3 · 2011-06-25T20:22:05.917

1

You can put a background on the <li> elements in your example like this:

ul.example2 li {
    /* your background settings */
}

the above targets only <li> elements inside an <ul> having class example2. If you want to use the same style on multiple elements you can separate them using comma's like this:

.example1,
ul.example2 li {
    /* your background settings */
}

edited Jun 25 '11 at 20:22

answered Jun 25 '11 at 20:17

ju5tu5

36
3

hi and thanks for asking i modified the question because i have a mistake redacting the question – Jorge Jun 25 '11 at 20:42

score 1 · Answer 4 · answered Jun 25 '11 at 20:57

If I am not wrong, what you meant is you want the background image assigned to the class example1 to be assigned to those <li> who are the children of an element assigned the class example2?

If that's the case, use:

.example1, .example2 li {
    background-image: url('/image/url/here/');
}

score 1 · Answer 5 · answered Jun 25 '11 at 21:03

1

If I understand your question correctly, you have a background property defined in class example1 and you want that same background property to apply to li elements of class example2. Is that correct?

If so, then this may be what you're looking for:

.example1, .example2 li {
  background: ....;
}

Please clarify if I am still misunderstanding the question.

answered Jun 25 '11 at 21:03

Brent

2,961
1
17
18

Actually, this is the same as @ju5tu5's answer. I must still not understand what you're asking. – Brent Jun 25 '11 at 21:06

how can i make a css class with other

5 Answers5