Targeting a specific element

JavaScript
1

Take a look at this fiddle.

It has two divs with class name wrapper_servp,one is hidden and one is visible.

I want to target the value of the data attribute of the input that has class-name services but only of the hidden div.

In other words I want to get 26.

2

Best bet is to do the hiding via a class. that way you have a CSS query for the hidden div.

.wrapper_servp.hidden .services

vs.

.wrapper_servp .services
1 Like
3

Just like there’s a :visible selector, there’s also a :hidden selector. ;-) However, using a proper utility class as @Dormilich suggests is certainly the preferable approach.

4

I tried using a class but it does not work…let me explain why.
I used this class:

.btypehide{display:none}//of course the name can be anything

In trying to apply it the original style prevails.
Take a look at this image snapshot from chrome dev tools:image

5

which of the two comes first in the definitions?

6

.btypehide is at line 102.
.
wrapper_servp{ display: flex;…} is at line 800 so I guess this answers your question.

Despite the above the latter takes precedence and I cannot understand why…

7

Because that is how Cascading Stylesheets work.

To fix that you’d have to make btypehide more specific, e.g. div.btypehide or .wrapper_servp.btypehide

1 Like
8

When it comes to the following two definitions:

  • wrapper_servp{ display: flex;...}
  • .btypehide{display:none}

Isn’t the .btypehide of a higher specificity, which would give it priority over the other?

9

no, both are a single class (there was an unintended line break between . and wrapper_servp in the previous post)

10

Aha yes, so when they both have the same specificity (id trumps class, class trumps tag), the line number ordering then determines in which order they are applied. Thanks.

A useful resource: The Great Specificity Swindle

1 Like
11

I thought that rules that come first(earlier in the sheet take precedence)…I was wrong,it is the other way around.

thx…

12

by the way…that solved it…

13

Rules that have the same specificity will obey the cascading pattern. Specificity overrules cascading, and Ids overrule all classes.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.