Reputation: 457
I have 4 dynamic divs in a page starting with the same text (dropdown1, dropdown2, dropdown3, dropdown4). The number changes every time I refresh the page but string "dropown" remains the same.
I want to apply the rule to dropdown4(the number may change on next refresh but div will always be on 4th position in the page.) How do I do that?
I have been using the following code which hides all the divs
div[id^='dropdown']{
display: none;
}
Just want to hide 4th div, is it possible? Don't want to use JavaScript here, pure CSS.
Upvotes: 0
Views: 36
Reputation: 101
this selector applies formatting to anything ending in what you want.
https://www.w3schools.com/cssref/sel_attr_end.asp
[class$="box4"] , which selects elements whose class names ends in box4.
If you add div to the area outside:
Div[class$="box4"] it selects any div matching the same case. Hope that helps.
Upvotes: 0
Reputation: 8512
Use the :nth-of-type()
selector
div:nth-of-type(4) {
display:none;
}
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
Upvotes: 2