עזרה דחופה בhtml

[Sara Rivka]

שלום וברכה
אני צריכה לעשות במסגרת ש"ב בhtml, טבלה של תמונות ללא טבלה.
היינו שכל כמה תמונות תהיינה תחת div ואז אני צריכה לעשות מסגרת לכל תמונה כך שזה יראה בשחמט.
כל שורה שמתי בdiv נפרד, ולכל שורה שמתי class, או ezugi או zugi.
ואז בכל class, את התמונות האיזוגיות צבעתי בצבע אחד ואת הזוגיות בצבע שונה, בהתאם לclass השורה.
כך:

.ezugi img:nth-child(odd){
    border: solid 5px #A50021;
}
.ezugi img:nth-child(even){
    border: solid 5px  #4D4D4D;
}
.zugi img:nth-child(even){
    border: solid 5px #A50021;
}
.zugi img:nth-child(odd){
    border: solid 5px #4D4D4D;
}

ברצוני לעשות שכל תמונה תהייה קישור, אבל אז זה יוצא שכל תמונה היא בן איזוגי של הקישור, ואז, כל התמונות באותו צבע.
איך אני יכולה לעשות שכל תמונה תהיה צבע אחר. (מלבד להצמיד class לכל תמונה, כי המורה רוצה שנעשה את זה עם odd וeven)

[OdedDvir]

צריך להגדיר עיצוב נפרד לשורות הזוגיות והאי זוגיות
ובכל סוג שורה להגדיר עיצוב הפוך לאלמנטים של ה-img הזוגיים והאי זוגיים

.image-row:nth-child(odd) {
    img:nth-child(odd) {
    border: solid 5px #A50021;
  }
    img:nth-child(even) {
    border: solid 5px  #4D4D4D;
  }
}
.image-row:nth-child(even) {
    img:nth-child(even) {
      border: solid 5px #A50021;
  }
    img:nth-child(odd) {
    border: solid 5px  #4D4D4D;
  }
}

ובדף:

<div class="image-row">
<img src="https://tchumim.com/assets/uploads/system/site-logo.png?v=k6b5m3pa5ec">
<img src="https://tchumim.com/assets/uploads/system/site-logo.png?v=k6b5m3pa5ec">
<img src="https://tchumim.com/assets/uploads/system/site-logo.png?v=k6b5m3pa5ec">
</div>

<div class="image-row">
<img src="https://tchumim.com/assets/uploads/system/site-logo.png?v=k6b5m3pa5ec">
<img src="https://tchumim.com/assets/uploads/system/site-logo.png?v=k6b5m3pa5ec">
<img src="https://tchumim.com/assets/uploads/system/site-logo.png?v=k6b5m3pa5ec">
</div>

פלט:

קוד:
https://codepen.io/OdedDvir/pen/zYexWQJ

[dovid]

@OdedDvir הבאת SCSS.

[dovid]

@Sara-Rivka את יכולה לשים כל תמונה בתוך אלמנט a, ולשנות את הסלקטור של odd/even לa, ככה:

.ezugi a:nth-child(odd) img {
    border: solid 5px #A50021;
}
.ezugi a:nth-child(even) img{
    border: solid 5px  #4D4D4D;
}
.zugi a:nth-child(even) img{
    border: solid 5px #A50021;
}
.zugi a:nth-child(odd) img{
    border: solid 5px #4D4D4D;
}

יכול להיות שבכלל את יכולה לעצב ישירות את הa ולא צריכה עיצוב לimg וא"כ רק תחליפי את המילה img במילה a בCSS.

[Sara Rivka]

@OdedDvir תודה!
את מה שאתה הבאת לי כבר עשיתי קצת שונה.
אבל התמונות הן לא קישור.
אני רוצה שכל תמונה תהיה קישור, אבל אז, כל הבנים של הקישורים הם איזוגיים... זאת הבעיה שלי

[Sara Rivka]

@dovid ניסית לעצב רק את הa, אבל אז המסגרת לא על כל התמונה.

תודה רבה.
עכשיו אני צריכה ללכת לסמינר.
אם היה לכם רעיון איך לעשות את זה, אשמח שתכתבו, וכשאחזור אנסה את זה.

[dovid]

@Sara-Rivka לא נכון, הקוד שהבאתי מעצב את הimg, ולא את הa.
הסלקטור .ezugi a:nth-child(odd) img משמעותו בחר תמונה שיש לה הורה/סב מסוג a אי זוגי שיש לו הורה/סב עם מחלקה ezugi.
(רק מתחת הצעתי שאולי את לא צריכה לעצב את הimg).