Complex CSS selector - how to require visible

Question

I'm writing a CSS selector, which I have working so far:

input[placeholder*='mail']

but I'd like to ensure it's not finding invisible (ie: not visible) elements.

I've been trying :visible in various places in the pattern (because I couldn't find a good reference on the CSS selector lexer, but not luck with these:

input[placeholder:visible*='mail']
input:visible[placeholder*='mail']
input[placeholder*='mail']:visible

How do I do this? And anyone have a good reference on learning more complex selector formats?

I'm using selenium to parse web pages. Selenium has a way to find elements by their CSS selector. — lollercoaster, Jul 27 '17 at 22:44
What would make it invisible? A class, an inline style, ...? — Stephen Thomas, Jul 27 '17 at 22:50
Oh hmmm. Hidden inputs, display none - are there other ways? — lollercoaster, Jul 27 '17 at 22:51
If you can do it in javascript you can check `element.offsetParent` which will have a value if visible and null otherwise — pinkfloydx33, Jul 28 '17 at 00:08

score 1 · Answer 1 · answered Jul 27 '17 at 22:53

1

There is no CSS selector for :visible. You sould then work with classes and target the elements which have the class .visible. (Or NOT have the class .visible.

The :visible selector is only available in jQuery for example, which uses the pseudo selector for finding elements visible in current scroll view.

answered Jul 27 '17 at 22:53

Jelle Posthuma

153
1
8

Hmm, I really just want to filter out invisible DOM elements and only select those that are visible. Is there a way to do that? – lollercoaster Jul 27 '17 at 22:58

score 1 · Answer 2 · answered Jul 27 '17 at 22:53

1

You can't do it with only CSS.

But you can do it with jquery and most probably this answer can help you.

answered Jul 27 '17 at 22:53

pacanga

416
6
17

I really just want to filter out invisible DOM elements. Is there a way to do that without jQuery? – lollercoaster Jul 27 '17 at 22:58
As I follow your problem, there is no way of it. – pacanga Jul 27 '17 at 22:59

Louys Patrice Bessette · Accepted Answer · 2017-07-27T23:12:13.410

1

:visible is a jQuery selector. Not a CSS one.

And you can't use it on an element's attribute like placeholder.

To check if there is an inputted value (which makes the placeholder "not visible"), you need to use some client-side code.

The jQuery would look like this:

$("input[placeholder*='mail']").each(function(){
  if( $(this).val() != "" ){
    // Do something.
    // ...
  }
});

To "filter out invisible elements" and keep only the visible ones:

var visible = $("input[placeholder*='mail']:visible").length;
console.log(visible+" elements are visible.");

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="one" placeholder="My mail">
<input type="text" id="two" placeholder="Your mail">
<input type="text" id="three" class="hidden" placeholder="Junk mail">
<input type="hidden" id="four" placeholder="Cool mail">

edited Jul 27 '17 at 23:12

answered Jul 27 '17 at 22:55

Louys Patrice Bessette

33,375
6
36
64

why do we want to "check if there is an inputted value"? how does this imply visibility or lack thereof? sorry if I'm being dense. I really just want to filter out invisible DOM elements. – lollercoaster Jul 27 '17 at 22:57
The way I understand your question... You want to target VISIBLE elements having a placeholder NOT visible. – Louys Patrice Bessette Jul 27 '17 at 22:59
I edited... Since, I misunderstood you question at first. – Louys Patrice Bessette Jul 27 '17 at 23:12

Complex CSS selector - how to require visible

3 Answers3