Is it possible in CSS3 to create a selector like this?
#id(min-height: 300px) {
...
}
If yes, how can I do it?
Asked
Active
Viewed 672 times
-2
-
1What are you wanting to achieve? – James Donnelly Apr 09 '18 at 11:57
-
I want a selector which only selects an element with a specific min-height. – Stefan Apr 09 '18 at 11:58
-
What I actually want to achieve is too complicated to explain here in short. – Stefan Apr 09 '18 at 11:58
-
2No...it's not.., – Paulie_D Apr 09 '18 at 11:59
-
2I Think you must use jquery. because you cannot (using a CSS selector) select elements based on the CSS properties that have been applied to them. – Sfili_81 Apr 09 '18 at 12:00
-
I don't know why this matters, my question has nothing to do with what I want to actually achieve. – Stefan Apr 09 '18 at 12:00
-
@Sfili_81 Ok, thanks for the answer. – Stefan Apr 09 '18 at 12:01
-
It's not possible. – Adil Apr 09 '18 at 12:01
-
You can add a class to elements with ```min-height:300```, then later apply specific styling to it – Sandesh Gupta Apr 09 '18 at 12:04
-
*"my question has nothing to do with what I want to actually achieve."* - WHAT!? - Then why ask it? – Paulie_D Apr 09 '18 at 12:05
-
Try telling us what you actually want to achieve and what problems you are encountering... **then** we might be able to help. Otherwise we're guessing. – Paulie_D Apr 09 '18 at 12:06
-
@user1743312 The reason people are asking what you want to achieve when we see questions like this, it frequently turns out to be an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). We're just trying to help out. – samanime Apr 09 '18 at 12:08
1 Answers
0
If you want to specify the height based on the screen, you could use a media query.
@media (min-height: 300px) { ... }
However, it sounds like you are actually wanting to find all elements with a given size. Unfortunately, there isn't a CSS selector for that. If you want to do that, you'll have to use JavaScript and iterate over all of the possible elements.
Ideally, you'd want to narrow down your set of elements (like by class or common parent):
document.querySelectorAll('#parent *')
document.querySelectorAll('.someClass')
However, if you just want to loop over everything, you can use:
document.querySelectorAll('*')
Regardless of which on you pick, you can use filter() to filter for only the ones with the specified height you want:
const elements = Array.prototype
.filter.call(document.querySelectorAll('*'), el => el.offsetHeight >= 300);
From there, you can do whatever you want with them.
Note that it's ideally important to reduce your sets by choosing a selector more narrow than * because the more elements it has to loop through, the slower it'll be.
samanime
- 25,408
- 15
- 90
- 139
-
Really thank you for that large answer but that was not needed, all I wanted to know was my question. – Stefan Apr 09 '18 at 12:06
-
I gave you the answer to your question: it's not possible with just CSS. – samanime Apr 09 '18 at 12:07