2

I have this HTML code : 

<div class="field">                  
<input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b">
<input type="file" value="" name="file1"> <input type="file" value="" name="file2">
<input type="file" value="" name="file3"> <input type="file" value="" name="file4">
<input type="file" value="" name="file5"> <input type="file" value="" name="file6">
<input type="file" value="" name="file7"> <input type="file" value="" name="file8">     </div>

In this HTML, i want hide all input type="file" inside div class="field"except the first one. I cannot change the HTML (adding classes). I tried to apply a pseudoclasses and structurate selector toghether, to accomplish the task :

.field input[type='file']{
  display:none;
}

.field input[type='file']::first-child{
display:block;
}

But it seems doesn't work. Anyone could suggest me the right syntax for using pseudo classes and selector togheter in css, to solve this problem?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Stefano Danieli
  • 63
  • 5

2 Answers2

2

Pseudo-classes use only one colon, so it's :first-child, not ::first-child.

But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.

You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:

.field input[type='file'] {
    display:block;
}

.field input[type='file'] ~ input[type='file'] {
    display:none;
}

This technique is further described here, and can be used for most other simple selectors, not just classes and attributes.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

You can use this code for all values and you will hide all input type="file" inside div class="field"except the first one. try this code.

<html>
<head>
<style>
.field input[type='file']
{visibility:hidden;}
</style>
</head>
<body>
</body>
</html>
zapbuild
  • 182
  • 4