Consider a <div class="well well-large well-small" /> with the following styles from twitter bootstrap https://github.com/twitter/bootstrap/blob/master/less/wells.less
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #wellBackground;
border: 1px solid darken(#wellBackground, 7%);
.border-radius(#baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-large {
padding: 24px;
.border-radius(#borderRadiusLarge);
}
.well-small {
padding: 9px;
.border-radius(#borderRadiusSmall);
}
How does CSS decide which padding to apply in situations such as this? Will it be 19px, 24px, 9px or undefined value? My understanding of specificity is rudimentary and it seems that there is a specificity tie in this case between the .well .well-large and .well-small
If the specificity is equivalent, they are applied in order of definition.
Example:
.a {
color: red;
}
.b {
color: blue;
}
<span class="a b">this is blue</span>
<span class="b a">this is blue</span>
If you're curious, here is the rules of how styles are cascaded.
Related
Is there a property to style the first date and last date of a p-calendar from PrimeNG. When styling the p-highlight it changes all elements in the range to the style. Is there a way to specify the first element and last element styles in css to create a range selection like the following:
Are there any other ways to do this other than through css?
html:
<div class="field col-12 md:col-4">
<p-calendar selectionMode="range"></p-calendar>
</div>
Style sheet:
.p-datepicker {
background: whitesmoke;
color: gray;
table {
font-size: 12px;
color:#f4f4f4;
td {
padding: .5rem;
color: black;
&.p-datepicker-other-month{
color: transparent;
}
> span {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 1px solid transparent;
&.p-highlight {
// Active circle
color: #f4f4f4;
background: orange;
&.p-disabled{
background: transparent;
}
}
}
}
}
}
Didn't found a way to do it by css and I am not sure it could be achieved.
But javascript/typescript should do the job:
.html:
<div class="field col-12 md:col-4">
<p-calendar (onSelect)="onDateSelected($event)" selectionMode="range">
</p-calendar>
</div>
.ts:
onDateSelected(event: any) : void {
const rangeLength = document.getElementsByClassName('p-highlight').length;
document.getElementsByClassName('p-highlight')[0].style.background = 'blue';
if(rangeLength>0)
document.getElementsByClassName('p-highlight')[rangeLength-1].style.background = 'blue';
}
In sass we can do some kind of class name concatenation with this:
//Sass
.button{
&-1{ background-color: red; }
&-2{ background-color: blue; }
}
//Result
.button-1{ background-color: red; }
.button-2{ background-color: blue; }
Can I somehow do concatenation on top of a prefix selector like this so that I don't have to use a base class or #extend:
*[class^="button-"]{
width: 20px;
height: 20px;
border: 1px solid black;
&-1{
background-color: red;
}
&-2{
background-color: blue;
}
}
I could achieve the same results with defining a base class and then adding specific styles after that like this:
.base-button{
width: 20px;
height: 20px;
border: 1px solid black;
}
.button{
&-1{ background-color: red; }
&-2{ background-color: blue; }
}
But I would then have to go and add that base class to all elements.
Another approach is using the #extend directive like this:
.button{
width: 20px;
height: 20px;
border: 1px solid black;
}
.button-{
&1{
#extend .button;
background-color: red;
}
&2{
#extend .button;
background-color-blue;
}
}
I guess my question is if there is a particular reason why sass doesn't support class concatenation when the parent selector is a class prefix selector. Isn't it safe to make the assumption that the prefix used in the selector can be used for concatenation when that parent selector has nested classes with &? Or am I just doing something wrong with my sass?
Thanks!
SASS does a objective, literal concatenation when you use &, so:
*[class^="button-"]{
width: 20px;
height: 20px;
border: 1px solid black;
&-1{
background-color: red;
}
&-2{
background-color: blue;
}
}
will generate:
*[class^="button-"]{
width: 20px;
height: 20px;
border: 1px solid black;
}
*[class^="button-"]-1{
background-color: red;
}
*[class^="button-"]-2{
background-color: blue;
}
which has invalid syntax, because a selector such as *[class^="button-"]-1 is not valid CSS.
You can create a mixin to get what you want. But frankly, these solutions should be last last resort, like selector by an attribute other than class name or id. Even that, just KISS to keep readability and maintainability.
You can combine CSS selectors by using a comma, such as in the following example:
.one, .two {
color: #F00;
}
<div class="one">One</div>
<div class="two">Two</div>
This has the same result as specifying the two selectors independently:
.one {
color: #F00;
}
.two {
color: #F00;
}
<div class="one">One</div>
<div class="two">Two</div>
Combining selectors as above is incredibly useful, as it means that you only have to worry about changing one value if you want to alter multiple elements. This comes in really handy for colour scheme changes.
But is it possible to combine CSS declarations?
For example, let's say I'm trying to vertically centralise text in an element, where line-height should always equal height:
.test {
border: 1px solid #000;
padding-left: 10px;
height: 100px;
line-height: 100px;
}
<div class="test">Test</div>
The expected combined declaration of height, line-height: 100px; doesn't apply either declaration, raising an invalid property value.
In SASS, it would be possible to make line-height dependent on height with something as simple as:
$height = 100px;
.test {
border: 1px solid #000;
padding-left: 10px;
height: $height;
line-height: $height;
}
Is there any way to specify that one property should utilise the same value from another property with raw CSS?
Sure you can:
:root {
--height: 100px;
}
.test {
border: 1px solid #000;
padding-left: 10px;
height: var(--height);
line-height: var(--height);
}
<div class="test">Test</div>
But not all browsers support CSS variables - http://caniuse.com/#feat=css-variables
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
how is it possible to make one class inherit from another in the CSS file?
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:1px 6px 2px 6px;
cursor:pointer;
}
input.btn_light {
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
here I want input.btn_light to inherit from input.btn.. how is that possible to do in the CSS file?
#vadiklk
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:3px 6px 4px 6px;
cursor:pointer;
}
input.btn_light {
input.btn;
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
Give the HTML element both classes:
<input type="submit" class="btn btn_light" value="Action" />
According to: http://dorward.me.uk/www/css/inheritance/ it is not possible and needed.
As an alternative to the accepted answer, you can also do the following with your CSS. The difference being that instead of using multiple class names where it will be used, this way uses multiple class names in the CSS to say "use this style and this style". Then, the reference (the input button in this case) only uses one class name.
In the end, it accomplishes the same thing as the accepted answer.
Note: I changed the value of the borders because I wanted to use values that were less subtle for the snippet.
input.btn,
input.btn_light {
border: 2px solid red;
background: url('gfx/layout.btn_bg.png');
color: black;
font-weight: bold;
margin-right: 6px;
padding: 1px 6px 2px 6px;
cursor: pointer;
}
input.btn_light {
border: 2px solid green;
background: url('gfx/layout.btn_light_bg.png');
}
<body>
<input type="button" class="btn" value="Regular">
<br>
<input type="button" class="btn_light" value="Light">
</body>
SCSS/SASS example:
HTML
<h1><span class='section-title'>Some heading!</span></h1>
<h2><span class='section-title'>Some heading!</span></h2>
<h3><span class='section-title'>Some heading!</span></h3>
<h4><span class='section-title'>Some heading!</span></h4>
<h5><span class='section-title'>Some heading!</span></h5>
<h6><span class='section-title'>Some heading!</span></h6>
SCSS
// This will style every .section-title element within
// a heading the same as the heading.
.section-title {
h1 & { #extend h1; }
h2 & { #extend h2; }
h3 & { #extend h3; }
h4 & { #extend h4; }
h5 & { #extend h5; }
h6 & { #extend h6; }
}