CODEWITHSUNDEEP
htmlcsscss-selectors
Craig Jones
Craig Jones

Reputation: 35

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?

Upvotes: 3

Views: 246

Answers (3)

Patrick Graham
Patrick Graham

Reputation: 992

I'd like to suggest doing this a different way, instead of creating a new style to select each nth-of-type like you do in the following code:

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

The modal dialogue should set a margin for how far it should be from the top, like this:

.modalDialog{
    color:yellow;
    margin: 15% auto;
}

Upvotes: 0

dippas
dippas

Reputation: 60603

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>

Upvotes: 1

Johannes
Johannes

Reputation: 67799

nth-of-type(n) counts the tag type (on the same level), not the class: In your case it will select the nth div tag, not the nth tag with class .modalDialog

Upvotes: 0

Related Questions