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
Related
How to assign after & before pseudo classes to multiple CSS-classes
For example:
[class*="divclass-"]::before, ::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
Consider this HTML structure, where you have a <div> which have children <span> and <p>. And another <span> and <p> as siblings.
<div>
<span>abc</span>
<p>xyz</p>
</div>
<span>123</span>
<p>456</p>
For example, if we need to change the colour of the children, we could write on your way,
div span, p{
color: red;
}
This problem with this is that, it will change the colour of the sibling <p>456</p> too as the style is applied globally to all the paragraph tags.
And the solution is to follow specificity as we did with the <span> and write the selectors as
div span,
div p{
color: red;
}
The same rule applies to pseudo-elements as well. Hence the solution is,
[class*="divclass-"]::before,
[class*="divclass-"]::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
Note 1
If you are working on SASS, your syntax could be,
[class*="divclass-"]{
&::before,
&::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
}
Note 2
The before and after pesudo-elements require the content property.
Hope this helps.
The comma does not mean that the following elements are children of the same selector (here [class*="divclass-"]).
It just allows you to chain the selectors.
#see https://www.thoughtco.com/comma-in-css-selectors-3467052
Here is the solution:
[class*="divclass-"]::before,
[class*="divclass-"]::after {
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
content: '';
}
<div class="divclass-1" style="height: 10px; width: 10px"></div>
I’m trying to reduce some Stylus code using its mixins.
In some particular cases I need a class as a parameter. Let’s we’ve got:
.parent:hover .child
color: lighten(red, -25%)
.child
color red
I’d like to have a mixin which gets both classes as parameters.
I can’t find a way from the docs. ((
You can achieve this with interpolation: http://stylus-lang.com/docs/interpolation.html
Here's an example codepen: https://codepen.io/webdevdani/pen/POVLpr
Code example from codepen:
/* Stylus */
.box {
height: 2rem;
width: #height;
background-color: blue;
padding: 1rem;
}
.red-box {
background-color: red;
}
$blockColor(parentClass, childClass) {
{parentClass} {
background-color: green;
{childClass} {
background-color: yellow;
}
}
}
$blockColor('.box', '.red-box');
<div class="box">
<div class="box red-box"></div>
</div>
If I define the following CSS rule:
img {
max-width: 200px;
max-height: 200px;
border: 1px solid black;
}
Is there a pure-CSS way of detecting those image objects that would have been larger without the size constraints? Something that semantically matches:
img:resized {
border-color: green;
}
Alternatively: is there a way of only detecting large images in the first place? For example:
img {
border: 1px solid black;
}
img[width>200px], img[height>200px] {
max-width: 200px;
max-height: 200px;
border-color: green;
}
Thanks!
No, there are no CSS selectors that can query style properties, whether declared or computed, as rendering of DOM elements has no relation to the DOM hierarchy.
I've got:
<div class="cardDisplay">
<img class="cardImg" id="cardImg4" alt="Card" src="picture.jpg" width="148" height="236.8" title="">
</div>
Here's my CSS.
.cardDisplay
{
width: 1020px;
background-color: #040D14;
margin: auto;
position: relative;
}
.cardImg
{
padding:0px;
padding-left: 40px;
padding-right: 0px;
/* background-color: black; */
}
#cardImg4
{
border: 20px solid white;
padding-right: 30px:
}
The problem is I cannot get the, I thought, more specific ID to override the class. I've tried doing it a number of different ways with no luck. I'm using Chrome if that matters. Thanks.
You have a colon : instead of a semi-colon ; in your padding-right style for #cardImg4. The rule probably isn't being applied at all.
You should be aware that you have a : not ; after the #cardimg4 padding-right. This might affect it.
How come the #r3 isn't pink? (see jsfiddle.net/aAqKf/):
<!DOCTYPE HTML>
<html>
<head>
<style>
#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }
.pink div {
background: pink;
}
.red div {
background: red;
}
</style>
</head>
<body>
<div id="r1" class="red">
<div id="r2" class="pink">
<div id="r3"></div>
</div>
</div>
</body>
</html>
I would expect the pink class to apply the pink background to the div children. It doesn't work like that. Why?
Though, it works if I change the CSS as follows (jsfiddle.net/aAqKf/1/):
<style>
#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }
.red div {
background: red;
}
.pink div {
background: pink;
}
</style>
Please help me figure out how come it works that way. Also, please do not suggest that I use !important along with the background: pink declaration because it will work only until I change the HTML as follows:
<div id="r1" class="pink">
<div id="r2" class="red">
<div id="r3"></div>
</div>
</div>
NB: I am more interested in figuring out why it works that way than finding out how to make it work my way.
Both rules .pink div and .red div are equally specific. The latter rule overrides the former.
You almost never have to use !important, by the way. Using the selector body .pink div, or div.pink div is enough to give the selector more weight.
From this page
To make it easy, when two rules have the same weight, the last rule specified wins.
In your first fiddle, the red wins. In the second the pink wins.
Because the properties of class inheritance differ from that of the actual element.
For example, if you changed
.pink div { background: pink; }
to:
#r2 div { background: pink; }
it would work as you intended it, because the nested block level elements inherit based on their closest parent.
Classes, on the other hand, have much looser inheritance and properties get overwritten based on the parents, unless specifically said otherwise using !important, when two selectors have the same weight.
To further demonstrate this point, changing .pink div to div.pink div would also demonstrate the correct effect because, again, CSS is referring to an element and not a class selector.