This bothers me a while. I want to make a class that contains a specific group of classes (If this is to be possible). Like this:
.main_class {
//Contains multiple class css
class_one_css
class_two_css
class_three_css
}
Then you could call it like this
<input type="text" class="main_class"/>
Instead of calling multiple classes like this
<input type="text" class="class_one class_two class_three"/>
Hope to get an answer soon. Thank you.
Using LESS you can do just that
.main_class {
//Contains multiple class css
.class_one_css;
.class_two_css;
.class_three_css;
}
Try it here: http://winless.org/online-less-compiler
You can achieve this by using LESS..
Sample pen
LESS css
.class_one {
background: #c0c0c0;
}
.class_two {
width: 200px;
height:100px;
border: 1px solid black;
}
.class_three {
text-align: center;
padding: 15px;
}
.main_class {
.class_one ();
.class_two ();
.class_three ();
}
HTML
<div class="main_class">
Your text goes here
</div>
Related
First, please check my code.
<div className={styles.settingInfo}>
<header>
<h1>User ID</h1>
<p>this is for user ID</p>
<h1>Username</h1>
<p>this is for username</p>
</header>
<div>
<button type='button'>change</button>
</div>
</div>
With this code, what I'm trying to do is giving (h1)username(/h1) tag a margin-top:10px without giving className.
.settingInfo {
#include flexFullWidth;
height: 40%;
header {
#include headerStyle;
h1 {
color: colors.$BIG_TITLE;
letter-spacing: 1px;
}
}
div {
width: 35%;
padding-top: 20px;
border: 1px solid red;
}
}
I set the SCSS file like this, and was finding out how can I give a specific h1 tag a style without using className.
I know we can easily solve the problem giving just a className, but just want to figure out how can work on this differently. Thank you!
My suggestion is to just add a class but if you want to do this without it then you can use nth-child selector like so:
header h1:nth-child(3) {
margin-top: 10px;
}
You can select the first h1 using nth-child(1) in the same manner.
I would like to set style class to mat-menu. But I have tried everything, and it seems that it doesn't pick it up unless it's in Chrome Inspect.
html
<mat-menu class="matMenuColor" #menu="matMenu">
<form #logoutForm ngNoForm action="{{logoutUrl}}" method="POST">
<input type="hidden" name="token" value="{{token}}">
<input type="hidden" name="goto" value="{{redirectUrl}}">
</form>
</mat-menu>
css
.matMenuColor {
background-color: green;
}
Chrome Inspect:
.mat-menu-content:not(:empty) {
padding-top: 8px;
padding-bottom: 8px;
background-color: green;
}
The quickest solution is to use :ng-deep
::ng-deep .matMenuColor {
background: green;
}
But you can also try to change it by customize your theme.scss
Here you can find the documentation about theming Angular Material
https://material.angular.io/guide/theming
UPDATE
If you don't want to use ::ng-deep because it's obsolete try this this:
.mat-menu-panel > div.mat-menu-content {
background-color: green;
}
You can target this way
.mat-menu-panel.matMenuColor {
background: green;
}
.mat-menu-panel is the class name for mat-menu tag which is default.
::ng-deep is getting obsolete! Dont use it anymore! (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
The best way is to create an extra css file like mat-menu.css.
Then you need to import it inside styles.css like:
#import 'mat-menu.css';
After that you need to import the styles.css in your components css like:
#import '../../../styles.css';
Inside the mat-menu.css you can style everything you want.
Here is an example of a mat-accordion (this is sass, not css):
mat-accordion
mat-expansion-panel
border-bottom: 1px $grey-700 solid
color: $grey-300
font-size: 18px
mat-expansion-panel-header
mat-panel-title
color: $primary-color
font-size: 18px
I'm still new to styling with CSS. Here is my situation, I have three elements I want to one style. But each one needs small adjustments. So I gave each element the class of plan-price and then I gave them each a unique second class. Then I'm trying to nest the second class within the first. But that approach is not working. I'll show my code for clarity.
HTML
<div class="price-plans private-eye">
<p>Select</p>
</div>
<div class="price-plans little-birdy">
<p>Select</p>
</div>
CSS
.plan-price {
float: right;
margin: 83px 20px 20px;
.private-eye {
margin: 40px;
}
.little-birdy {
margin: 50px;
}
}
As you can see my attempt is to nest the second class within the first. I realize now that this does not work. What is another way I can do this?
CSS by itself does not support nesting styles like this. You could just have the override styles after the "default" style and rely on the cascading nature of CSS to overwrite the margins.
.plan-price {
float: right;
margin: 83px 20px 20px;
}
.plan-price.private-eye {
margin: 40px;
}
.plan-price.little-birdy {
margin: 50px;
}
<div class="price-plans private-eye">
<p>Select
</p>
</div>
<div class="price-plans little-birdy">
<p>Select
</p>
</div>
To do nesting styles, take a look at a CSS pre-processor like LESS which lets you do exactly what you are after.
To differentiate the divs, give them id's. id = "whatever". Classes are used to make the divs have the same css styles when they are named the same class, but id's are used to style it individually. In your css file do #id { code }
<div id = "something" class="price-plans">
<p>Select</p>
</div>
<div id = "somethingElse" class="price-plans">
<p>Select</p>
</div>
#something{
code
}
#somethingElse{
code
}
.plan-price {
float: right;
margin: 83px 20px 20px;
}
.private-eye {
margin: 40px;
}
.little-birdy {
margin: 50px;
}
I have 20 inputs in a page that are styled as buttons using the class property (that is, in the css I define borders, padding, width, etc).
But I want each one to have a different background color. In my current CSS I have 20 classes (one for each input) which are copies of all the style properties except for background-color.
It is working OK like this, but I feel somewhat uncomfortable repeting code. In there a very simple way to define most of the properties for all inputs (borders, padding, width...) and then specify the background-color, one for each input?
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
You can use multiple classes on elements and use a common class on the elements for the shared styles and then a different class (or id) for the custom styles specific to that element.
e.g.
HTML
<input type="text" class="input-class red" />
<input type="text" class="input-class green" />
CSS
.input-class {
margin: 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
You could use a different selector to target all text inputs rather than having a common class aswell:
input[type="text"] {
margin: 0;
}
As well as the above, you can create more specific selectors like:
.input-class.red {
background-color: red;
}
.input-class.green {
background-color: green;
}
input[type="text"].red {
background-color: red;
}
input[type="text"].input-class.red {
background-color: red;
}
Which will only target elements that match those selectors, situations where this might be useful is when you might have a class with the same name elsewhere that you don't want to be affected.
For example you might have already:
.red {
color: red
}
So you don't want an input with red text on a red background so you can chain the class selectors together to be more specific.
Like your "subclass":
.class {
/* for <elem class="class"> only */
}
.class.subclass {
/* for <elem class="class subclass"> only */
}
Is there a very simple way to define most of the properties for all
inputs (borders, padding, width...) and then specify the
background-color, one for each input?
Firstly, define the styling for all inputs, e.g. (or use a shared class etc):
input{
border:...
padding:...
}
Then, if the inputs are all children of the same top level parent, you can isolate specific ones using the :nth-of-type selector:
input:nth-of-type(1){
background-color:red;
}
input:nth-of-type(2){
background-color:blue;
}
Alternatively, provide each with a relevant class designation
There is not in native CSS, but you have other ways of doing this at your disposal:
You can define a common class that holds all of the style that are common across the inputs:
.my-inputs {
border 1px solid #ccc;
padding: 15px;
}
and then you can modify that as needed
.my-inputs.city {
width: 100px;
}
.my-inputs.state {
width: 50px;
}
So that in your markup, you can do things like this:
<input type="text" class="my-inputs state">
Another way you can do this is to use a CSS preprocessor which does afford you the ability to do class inheritance. Take a look at the documentation for LESS and SASS:
http://lesscss.org/
http://sass-lang.com/
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});