לפעמים אנחנו רוצים שכל קוביה יהיה לה צבע אחר או תמונה אחרת ושזה יחזור על עצמו כל 3 קוביות. יש אפשרות להגדיר ב CSS שלכל ילד שלישי יהיה צבע שונה, תמונה שונה וכן הלאה. כדי לעשות זאת נשים את הקוד הבא ב CSS מותאם של הליסטינג גריד, ואת הקלאס הזה image-change נכניס בלשונית מתקדם, בשורה של הקלאס בקונטיינר שבו אנחנו רוצים שתהיה התמונה שמתחלפת [בליסטינג עצמו]:
:is(.jet-listing-grid__item:nth-child(3n-1)) .image-change{
background-image: url(/wp-content/......../yourimage1.png);
background-size: cover;
}
:is(.jet-listing-grid__item:nth-child(3n-2)) .image-changen{
background-image: url(/wp-content/......../yourimage2.png);
background-size: cover;
}
:is(.jet-listing-grid__item:nth-child(3n-3)) .image-change {
background-image: url(//wp-content/......../yourimage3.png);
background-size: cover;
}
Code language: CSS (css)