CSS Classes & Subclasses

CSS Classes & SubClasses

Just need to add a space:

.area2 .item
{
...
}

CSS is there something like a class subclass?

HTML

<input type="text" class="btn red" value="Red">
<input type="text" class="btn green" value="green">
<input type="text" class="btn blue" value="blue">
<input type="text" class="btn black" value="black">
<input type="text" class="btn orange" value="orange">

CSS

.btn{
border:1px solid grey;
width:50px;
height:10px;
padding:10px;
margin: 10px;
}
.red{
background-color:red;
}

.green{
background-color:green;
}

.blue{
background-color:blue;
}
.black{
background-color:black;
color:white;
}

.orange{
background-color:orange;
}

Here is the fiddle

Selecting a specific subclass using CSS

When creating a definition that is to match two or more classes on one element, do not include a space.

.wrapper.red-background

What you've provided would look for a .red-background inside a .wrapper

HTML. Assign multiple classes with subclasses to a element

The selector for "has both classes a and b" is .a.b, so no space in between.

Use SASS subclasses in React

className={styles.subClass}

When using CSS modules, each class created in CSS/SCSS file is available as a property on the exported object.

Nesting has no effect on that, it only affects resulting selectors.

How to reference multiple sub-classes on the same element with SASS

So, when parent element also has subclass1 && subclass2, apply styles?

@katniss.everbean Yes, but the way you wrote it makes you have to duplicate the code.

After searching around for a while I stumbled upon this solution that works perfectly by writing any & references after the first one like #{&}:

SASS

.parent-class {
&#{&}-subclass1#{&}-subclass2{
border: 1px solid red;
}
}

Compiles into (CSS)

.parent-class.parent-class-subclass1.parent-class-subclass2 {
border: 1px solid red;
}

I found it on the SASS GitHub page.

Best way to use multiple classes and subclasses on the same element in CSS

This syntax of html markup is invalid:

<a class="typeform-share" class="button white" class="button transparent">

You cannot use multiple attributes with same name. If you use the browser will use it the first declared one ie. the above will be:

<a class="typeform-share">

To use multiple classes just use space separated values like in your previous markup. But you don't really need to put the same class multiple times:

<a class="typeform-share button white button transparent">
<!--Remove one of the button class, you don't need to repeat-->

Here's a link for how to work with multiple classes from CSS Tricks which will make your life easier.

CSS subclasses, am I doing it right?

popup class is parent container then you should select it as below.

.popUp .question 

so syntax would be parent space child

Am I subclassing my CSS correctly?

What you have there with the multi-classes will work fine assuming you want them to work like so:

<div class="button blue">
Will use .button and .button.blue
</div>

<div class="button">
Will only use .button
</div>

<div class="header blue">
Will use .header and .header.blue
</div>

<div class="header">
Will only use .header
</div>

<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>


Related Topics



Leave a reply



Submit