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.
Related
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
I'm trying to have a scrolling banner on the index page which has multiple sub-properties but, the main property of:
height: 75vh;
On all following pages I would like the same banner to have all the other rules that apply to it, but only have the height different:
height: 30vh;
This would allow both banners to follow all the same rules for remaining mobile responsive - ie they both still come under the id="banner".
One easy fix for this would be to label one id="bannerX" and one id="bannerY" and then just copy all the subsequent CSS under the corresponding X or Y. For example:
#bannerX {
background-color: #444;
color: #fff;
min-height: 40em;
height: 75vh;
position: relative;
}
#bannerX input, #banner select, #banner textarea {
color: #fff;
}
#bannerX a {
color: #fff;
}
#bannerX strong, #banner b {
color: #fff;
}
and so on...
versus
#bannerY {
background-color: #444;
color: #fff;
min-height: 40em;
height: 30vh;
position: relative;
}
#bannerY input, #banner select, #banner textarea {
color: #fff;
}
#bannerY a {
color: #fff;
}
#bannerY strong, #banner b {
color: #fff;
}
and so forth...
But that just leads to a duplication of a lot of CSS that is the exact same, just the original ID is changing one rule within it. This would work but just seems a really messy way around it. I'm sure there must be a better way of working this but I can't seem to make it work. I've tried adding in a class="banner-thick" or class="banner-thin" to each within their own section but that didn't seem to work either because then neither banner follows the original id="banner" rules because they're now id="bannerX" or id="bannerY"! I can't seem to make it work! Does anyone have an idea of how I can fix this?
I suspect there's a simple fix and I just can't see the wood from the trees!
Thanks all.
Use multiple class like this - class="bannerX height1" for 1st one. For 2nd one use class="bannerX height2". Where height only holds the value of heights. No need to use heights in bannerX.
CSS
.bannerX {
background-color: #444;
color: #fff;
min-height: 40em;
/*height: 75vh;*/ as we define different heights in height1 & height1 class
position: relative;
}
.height1 {
height: 75vh;
}
.height2 {
height: 75vh;
}
HTML
<div class="bannerX height1">
</div>
<div class="bannerX height2">
</div>
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 would like to make the width larger of the input[type=file] if an image has not yet been uploaded. Here is what I've been trying:
input[type=file] img[src=""] {
width: 300px;
}
The input[type=file] and img[src=""] work when alone but I can't get them to work together.
Please try below code:
input[type="file"] {
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
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.