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
CSS Fluid Layout: Margin-Top Based on Percentage Grows When Container Width Increases
Clamping Lines Without '-Webkit-Line-Clamp'
404 Errors on Bundled Jquery CSS, VS2012 Publishing to Azure
Change the Default Responsive Navbar Breakpoint
"Vw" CSS Units in Calc in Chrome Not Working
Add "Watermark" Effect with CSS
Nesting Inside CSS :Not() Selectors
CSS Hell Simulating Table with Div
Create a Radial Gradient for Internet Explorer 6/7/8
Bootstrap: Center Some Navbar Items
Multi-Column Issue with Horizontal Scroll
What Is That Thing Between CSS "Selectors" Called
Has the ::-Webkit-Selection Selector Ever Been Supported
Angular Material Side Bar with "Half" Side Mode
How to Change Navbar/Container Width? Bootstrap 3
Is It Bad to Work with Pixels in CSS
Webkit Border-Radius and Overflow Bug When Using Any Animation/Transition