- This topic is empty.
-
AuthorPosts
-
June 26, 2013 at 9:02 am #45880
braadd
ParticipantI don’t know how to describe this but I can show you in code.
.flat {
height: 60px;
width: 150px;
}.flat, .red {
background: #bf3f3f;
}.flat, .blue {
background: #3f8abf;
}So I want that div to have the flat styles in it but be red so then if I change red to blue it will change the colour to blue because of the styles how would I get this to work is there anyway of doing it? I want to do this instead of repeating my code.
June 26, 2013 at 9:39 am #140494Paulie_D
MemberYou need to do this…
.flat {
height: 60px;
width: 150px;
}.red {
background: #bf3f3f;
}.blue {
background: #3f8abf;
}June 26, 2013 at 9:40 am #140502Paulie_D
Memberor..for even more control
.flat {
height: 60px;
width: 150px;
}.flat .red { /* NB comma removed */
background: #bf3f3f;
}.flat .blue {
background: #3f8abf;
}June 26, 2013 at 9:42 am #140504Kitty Giraudel
ParticipantAre you like drunk @Paulie_D? :P
> .flat .red { /* NB comma removed */ }
This won’t work given his markup. This would work if `.red` was child of `.flat`. He seems to want having both classes on the same element.
I think you meant :
.flat.red { … }
June 26, 2013 at 9:45 am #140417Paulie_D
MemberOops…you are of course correct…
…and ‘Yes’…currently I am drunk….is that relevant? :)
June 26, 2013 at 9:48 am #140506Kitty Giraudel
ParticipantYou could even try a BEM approach.
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
June 26, 2013 at 9:48 am #140507braadd
ParticipantAwesome it works I did have the second one before I never knew that space made difference.
I have another question now. If I have .flat.red{} can I do something like this .flat.red {}.blue so I don’t have to repeat .flat again.
June 26, 2013 at 9:51 am #140509Paulie_D
MemberYou don’t have to repeat .flat.
.flat merely defines the width & height.
.red defines it as having a red background.
.flat.red means that is has **both** classes.
June 26, 2013 at 9:53 am #140510braadd
ParticipantBut I want to do it so I have .flat and .grad and .grad has a gradient instead of just 1 colour. So if I replace grad in the div it will make it gradient instead.
June 26, 2013 at 9:56 am #140511Paulie_D
MemberHere’s a quick example to show you the difference a space can make.
http://codepen.io/Paulie-D/pen/mhdCD
As you can see `.flat .red` (with space) means it has both classes, `.flat.red` actually works as an entirely **new** class and overrides the first option.
June 26, 2013 at 10:02 am #140513Kitty Giraudel
ParticipantThe following line targets all elements with the `.flat` class.
.flat { … }
The following line targets all elements with both the `.flat` class and the `.red` class.
.flat.red { … }
The following line targets all elements with the `.red` class that are children (direct or not) of an element with the `.flat` class.
.flat .red { … }
CSS selectors have to be read from **right to left** so the last element of the selector is the **key selector** which is basically what are you styles applied to.
Everytime you encounter a space within a selector line, you change element. To put it simple, the **key selector** is what is on the right of the last space in the selector line.
When you use `.flat .red`, the key selector is `.red`. When you use `.flat.red`, the key selector is `.flat.red`.
June 26, 2013 at 10:15 am #140519braadd
ParticipantOk I get it but is there any way to group them so has the same effect as .flat.red { … } but it can be in a group of more colours
June 26, 2013 at 10:17 am #140521Kitty Giraudel
ParticipantI don’t understand.
June 26, 2013 at 10:21 am #140523June 26, 2013 at 10:21 am #140524Paulie_D
MemberYou mean like…
.flat.red {
background:red;
}.flat.red.blue {
background:blue;
}Well you could but why would you?
Your element would **have** to look like this
div class=”flat red blue”>
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.