CODEWITHSUNDEEP
css
SS Sid
SS Sid

Reputation: 457

How to apply CSS on n-th div in page

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

Answers (2)

Brad G.
Brad G.

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

abney317
abney317

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

Related Questions