Comment appliquer des propriétés par rapport au grand-parent voir pl

Bonjour à tous et à toutes,

Je travaille pour une société qui vend des portails informatiques pour des bibliothèques.
Parmi les prestations qu'on propose et que je réalise, il y a la personnalisation graphique qui consiste à ajouter une surcouche CSS.
Souvent, je dois composer avec une structure HTML que je n'ai pas construite mais surtout sur laquelle je n'ai pas la main.
Le problème c'est que parfois, je dois appliquer des propriétés CSS (ex : position relative/absolute) à des éléments qui ne sont pas des parents/enfants directs.

Exemple sur un diaporama avec 3 diapos :

<div id="full-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#full-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#full-carousel" data-slide-to="1" class=""></li>
        <li data-target="#full-carousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="fill" style="background-image:url('https://mon-portail-a-moi/images/diapo-01.jpg');"></div>
            <div class="carousel-caption">
                <a class="carousel-link">
                    <h2 class="text-center">Titre de la diapo 01</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis erat quis ex fermentum feugiat eu vel mi. Pellentesque placerat tristique ipsum, sit amet consequat ipsum tempus ut. </p>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('https://mon-portail-a-moi/images/diapo-02.jpg');"></div>
            <div class="carousel-caption">
                <a class="carousel-link">
                    <h2 class="text-center">Titre de la diapo 02</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis erat quis ex fermentum feugiat eu vel mi. Pellentesque placerat tristique ipsum, sit amet consequat ipsum tempus ut. </p>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('https://mon-portail-a-moi/images/diapo-03.jpg');"></div>
            <div class="carousel-caption">
                <a class="carousel-link">
                    <h2 class="text-center">Titre de la diapo 03</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis erat quis ex fermentum feugiat eu vel mi. Pellentesque placerat tristique ipsum, sit amet consequat ipsum tempus ut. </p>
                </a>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#full-carousel" data-slide="prev" role="button">
        <i class="fas fa fa-chevron-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#full-carousel" data-slide="next" role="button">
        <i class="fas fa fa-chevron-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span>
    </a>
</div>

Je vais essayer d'être clair : il y a 3 diapos qui ont chacune une div qui a la classe "carousel-caption" qui elle-même a un lien contenant un titre et un paragraphe afin que tout ça (le titre + le paragraphe) apparaissent SUR chaque diapo.

Je voudrais appliquer sur le titre + le paragraphe de chaque diapo la propriété CSS mix-blend-mode : difference de façon à ce que le texte soit lisible quelle que soit l'image utilisée pour la diapo.

Quand je lis le descriptif de cette propriété, il est écrit que "la propriété mix-blend-mode définit la façon dont le contenu d'un élément doit se mélanger avec LE CONTENU DE L'ELEMENT PARENT et avec son arrière-plan."

Le problème c'est que l'image de chaque diapo n'est pas située au niveau de l'élément parent ("carousel-link") mais au même niveau que l'élément "grand-parent" ("carousel-caption"). L'image de chaque diapo est même une "grande-tante" par rapport au titre et au paragraphe.

D'où mes questions :
1. Est-ce qu'on peut appliquer des propriétés CSS (comme ici mix-blend-mode : difference ou position : absolute) par rapport au grand-parent voir plus ?
2. Si oui, comment SVP ?

D'avance merci pour vos réponses

Bonne journée à vous
Modifié par spip93 (30 Dec 2022 - 15:20)

Hello,

Je pense qu'il te faudra jouer sur la spécificité, vu que tu ajoutes sur surcouche CSS.

Par ex: #full-carousel .carousel option etc.... et à partir de ce sélecteur appliquez 'position: static' si besoin aux éléments qui ne devraient pas être référent pour les positions absolues. Si besoin, remonter plus haut dans le DOM, et s'appuyer sur un sélecteur unique et plus lourd (un ID par exemple) et appliquer du style pour surcharger. Je pense qu'il te faudra un minimum un socle HTML sur lequel tu devras t'appuyer et si possible le créér toi-même. Les surcouches en CSS on des limites.

Merci allan00958 pour ta réponse

Si je comprends bien ta réponse, pour qu'un élément HTML en position absolute ne se réfère plus à son élément parent (en position relative par défaut) mais à son grand-parent, voire aïeul, il faudrait :
- passer toute l'ascendance (à commencer par l'élément parent) en position static
- laisser l'aïeul (de préférence avec avec un long chemin CSS et/ou un ID dans le chemin), qui serait la "nouvelle référence", en position relative
C'est bien ça ou j'ai mal compris ?

En tout cas, ça se tente.

Pour ce qui est du socle HTML dont tu parles, je le fais très parcimonieusement, de façon indirecte et le plus occasionnellement possible (notamment à cause de mes faibles compétences) via du jQuery (ex : j'ajoute / j'enlève / je change de classe, je déplace des éléments dans le DOM ...)

Encore merci pour ta réponse

Bonne journée

@spip93

Oui, c'est ça ! Tu as parfaitement compris !

Pour ce qui est du socle HTML, si tu peux le faire sans jQuery, se serait mieux. J'imagine que le css est appliqué après le JS, ce qui peut causer des bugs difficiles à détecter.