שינוי צבעים או תמונה לכל קוביה שלישית בליסטינג גריד

שינוי צבעים או תמונה לכל קוביה שלישית בליסטינג גריד

לפעמים אנחנו רוצים שכל קוביה יהיה לה צבע אחר או...

לפעמים אנחנו רוצים שכל קוביה יהיה לה צבע אחר או תמונה אחרת ושזה יחזור על עצמו כל 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)

לקישור חיצוני >>

נשמח לקבל תכנים נוספים שלדעתכם יכולים לעניין את קהל היעד

פרטי יצירת קשר
דילוג לתוכן