How can i use "z-index" as an css attribute selector?

Question

I need an attribute selector to match the first div element with an z-index and a value of 0. tTis is how i tried to get hands on the element,by using the css attribute selector syntax in jquery:

$("div[z-index='0']").first().doSomeJqueryStuff() ....

In my document there is an explicitly set z-index with a value of 0 on a div element, but the selector returns no result. Thanks for help!

possible duplicate of jQuery: How to select all elements that have a specific CSS property applied — MarcinJuraszek
– MarcinJuraszek, Commented Jul 5, 2012 at 9:25

Suraj Rao · Accepted Answer · 2019-08-06 11:10:02Z

12

You can apply attribute selector to inline style attribute (* means contains):

div[style*="z-index: 0"]

edited Aug 6, 2019 at 11:10

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Aug 6, 2019 at 10:57

Slava

3,5151 gold badge22 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christian Bonato Over a year ago

Make this the most voted answer. Pure CSS is the way, JQuery is unnecessary overhead in this case. Thanks Suraj.

rinogo Over a year ago

Nice. However, note that this only works if the z-index: 0 is specified using a style attribute. If the z-index rule is part of a ruleset, the element won't be selected.

Igor Konopko · Accepted Answer · 2012-07-05 09:26:33Z

5

Try

$('div').each(function({ 
    if ($('div').css('z-index') === '0') { // or ... === 0
        ....
    }
}

answered Jul 5, 2012 at 9:26

Igor Konopko

7642 gold badges13 silver badges26 bronze badges

Comments

raymarch · Accepted Answer · 2012-07-05 09:26:26Z

1

You use Sizzle CSS Selector Library.

answered Jul 5, 2012 at 9:26

raymarch

1586 bronze badges

Comments

Blaster · Accepted Answer · 2012-07-05 09:24:12Z

1

No that's not possible. You can not select elemets based on css attribute values that way.

You should apply a class or an id to an element with your CSS value and use that instead or iterate over all elements and check for presence of css attribute (rather costly operation).

answered Jul 5, 2012 at 9:24

Blaster

9,0801 gold badge30 silver badges25 bronze badges

Comments

Damien Locque · Accepted Answer · 2012-07-05 09:25:58Z

1

You can check them one by one untile you found the first with z-index = 0 :

$('div').each(function({ 
    // Check doc about .css() function
});

answered Jul 5, 2012 at 9:25

Damien Locque

1,8112 gold badges20 silver badges42 bronze badges

Comments

FelipeAls · Accepted Answer · 2012-07-05 09:26:56Z

1

z-index is a CSS property and 0 its value.

CSS selectors are made of HTML (and SVG, ...) id, class, elements, attributes, pseudo and their values (and Sizzle, the selector part of jQuery is made the same way). These CSS selectors are for CSS rules where CSS declarations (property: value) are written and will style the HTML document.

answered Jul 5, 2012 at 9:26

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

Collectives™ on Stack Overflow

How can i use "z-index" as an css attribute selector?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related