Subclasses of a Div

Changing only one part of a class

[bachya]

Hi everyone,

I have some code like this:

.aboutPicture {
width: 200px;
height: 310px;
position: relative;
float: left;
margin: 5px5px 0 0;
padding: 0;
display: block;
}

.aboutPicture .person1 {
background-color: #abb342;
}

.aboutPicture .person2 {
background-color: #33f1ab;
}

This is just an example - if I have CSS code that is simply:

<div class="aboutPicture"></div>

...how would I specify which of the ".aboutPicture" types I want to use (person1 or person2). I want to say I could do something like:

<div class="aboutPicture">
<div class="person1"></div>
</div>

...and that would just change the background color of the aboutPicture box, but that doesn't seem right.

Anyone have any ideas?

[Fotiman]

.aboutPicture .person1 {
background-color: #abb342;
}

What that says is that all .person1 class items within .aboutPicture will have a background color of #abb342. It does not apply the other way around. That is, you can't specify a style on a parent container dependent upon which child it contains, which is what I think you're asking for.

[Fotiman]

But you could do something like this:

<div class="aboutPicture person1">
...
</div>

and that would apply the styles for both .aboutPicture and .person1.

[bachya]

Ahhh, I see - good to know. Thank you. :)