Craig Jones Craig Jones - 5 months ago 18
HTML Question

Using nth of type

I'm creating a website part of which consists of a long page containing full page slides. On each of these slides there will be 2 images which can be clicked to open a modal to view them.

The problem I'm having with my modal is that I place it at a certain distance from the top and this applies to every instance of the modal- fine for the first slide but less so for each subsequent slide.

One way I have considered to try and tackle this is nth child.
I know that there will be 2 images on each slide so I can add 100% to 3 and 4, 200% to 5 and 6, etc....

But....I don't seem to be able to get nth child working.
My css basically says:



.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:blue;
left: 22%;
width:80%;
height:90%;
top:103%;
z-index: 9;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:nth-of-type(1){
color:yellow;
top: 203%;
}

<div id="slide1" class="slide">
<div class="title">
blah blah
</div>
<div class="tooltip">
<a href="#openModal">
<img src="ONE.png">
<p class="tooltiptext">yup</p>
</a>
</div>
<div class="tooltip">
<a href="#openModal2">
<img src="two.png">
<p class="tooltiptext">aye..</p>
</a>
</div>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>descriptions</h2>
<img src="ONE.png">
</div>
</div>
<div id="openModal2" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>desc</h2>
<img src="two.png">
</div>
</div>
</div>





With the slide number counting up and the openModal also continuously counting up (so slide3 has openModal5 and 6)

Now the problem is. I just can't seem to get nth of type or something I've tried, nth of child, to do anything.
Never mind doing what I want and putting the modals for the subsequent pages in different places, I can't even get the second modal on the first page to change- as you see from the version above I'm trying to just get some response.

What am I doing wrong with this?

Answer

You can use attribute selector [id$="Modal1"]

[attr$=value]

Represents an element with an attribute name of attr and whose last value is suffixed by "value".

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  color: blue;
  left: 22%;
  width: 80%;
  height: 90%;
  top: 103%;
  z-index: 9;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
/*Starts with string */
[id^="openModal"] {
  position: relative;
  top: 200%;
  z-index: 10;
  opacity:1
}
/*Ends with string */
[id$="Modal1"] {
 background : red
}
[id$="Modal2"] {
 background : yellow
}
<div id="slide1" class="slide">
  <div class="title">
    blah blah
  </div>
  <div class="tooltip">
    <a href="#openModal">
      <img src="ONE.png">
      <p class="tooltiptext">yup</p>
    </a>
  </div>
  <div class="tooltip">
    <a href="#openModal2">
      <img src="two.png">
      <p class="tooltiptext">aye..</p>
    </a>
  </div>
  <div id="openModal1" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>descriptions</h2>
      <img src="ONE.png">
    </div>
  </div>
  <div id="openModal2" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>desc</h2>
      <img src="two.png">
    </div>
  </div>
</div>