I can’t hide an element with css by taking the data-column attribute

Asked

Viewed 215 times

3

I have an input with the code below:

<input type="search" class="filtro tablesorter-filter" placeholder="" data-column="1">

I’m using a css page to try to hide it:

<style> input[data-column=1] { display:none } </style>

But the element continues to be shown on the screen.

When I put it like this it works normally, but there is more than one and the single filter would be just the data-column:

<style> input[type=search] { display:none } </style>

Am I doing something wrong? This attribute because it is not html default is not mapped by CSS?

OBS: I tried to use that seletor { input[data-column=1] } with Jquery, but also failed.

css jquery html

1 answer

10


You have to put the value of the attribute in quotes, like this:

<style> input[data-column="1"] { display: none } </style>

However this type of selector does not work in IE8, you can do this via jQuery:

$('input[data-column="1"]').css('display', 'none');
  • 3

    jQuery is nice and lets you omit quotes, but CSS is not.

  • That’s weird, I swore it was without quotes. When I try to put input[type=search] without quotes it works. Because data-column does not work?

  • 1

    let’s say search is not a value, it’s a property...I don’t know if that’s right, with those words...

  • 8

    data-elements are like variables, the content you have is a string, and has to be compared like this. the input type because of the HTML4 and previous history has set to give the same with or without quotation marks, but the date- elements didn’t exist before...

Browser other questions tagged css jquery html

You are not signed in. Login or sign up in order to post.