Css cascade

Bonjour,
est il possible de changer la valeur d'un élément CSS sans tenir compte du/des parents?
Par exemple chaque balise "p" sera différente , j'ai 10 paragraphes par page le 1 =rouge, le 2 vert, .... le 10 rose.
et mes paragraphes dans la page sont sans organisation particulière : aucun parent identifiable.
Donc l'idée serait juste de donner une valeur à chaque paragraphe qui arrive.
Et je ne peux modifier le code html de la page.
???? Merci e votre aide

Hello, pour répondre directement à ton problème, je vois deux possibilités :
- :nth-child(…) (documentation)
- :nth-of-type(…) (documentation)

Le désavantage sera la maintenance, si tu ajoutes dans le futur, un ligne en plein milieu, tu devras ± recommencer à tout compter et du coup, tout modifier.

Perso, j'ajouterais les quelques class nécessaires :
1. tu créés tes quelques class CSS

.txt-green{color: green;}
.txt-red{color: red;}

2. tu places simplement ta class CSS là où tu en as besoin.

Tu gagneras clairement en maintenabilité

Salut,

Sans organisation particulière donc avec des niveaux de profondeurs différents, sans parents identifiables, sans toucher au html et en CSS only... là je vois pas... tu aurais un exemple de DOM à nous donner pour qu'on le ronge ?


[EDIT]
Ah alors si

a écrit :
sans organisation particulière : aucun parent identifiable.

Ca veut dire que tout les <p> sont dans la meme balise alors Yordi t'a donné la réponse. Je croyais qu'il y avait des parents autour des <p> mais qu'ils changeaient et/ou n'étaient pas identifiables..
[/EDIT]
Modifié par _laurent (14 Dec 2020 - 14:52)

Merci pour les réponses

en fait , j'aurai du tout expliquer avant plutôt que de vouloir simplifier.

j'ai des images dans ma page et je veux mettre comme un tampon sur chacune.
mais pour faire moins "plaqué", j'aimerai décaler ce tampon à chacune de ses affichages.

Sur la page vous verrez que j'ai mis une class différente, mais ceci m'oblige à l'ajouter à chaque fois. Voir les petits tampons noirs (provisoire en haut de chaque image)
Et sur d'autres pages le nombres d'images sera de 10.

Le top serait d'avoir 10 possibilités logoB1, logoB2,..... logoB10
et que ceci s'ajoute tout seul car il trouve la balise (".ronde img" par exemple)

la page est ici c'est l'index avec ses 4 images
https://ateliernotredame.fr/
Modifié par l3d (14 Dec 2020 - 15:03)

Dans ce cas, tu peux simplement utilisé nth-child(…) comme ceci :

.wp-block-columns:nth-child(1) .wp-block-column:nth-child(1) .logoB2::before {/*Position 1*/}
.wp-block-columns:nth-child(1) .wp-block-column:nth-child(2) .logoB2::before {/*Position 2*/}
.wp-block-columns:nth-child(2) .wp-block-column:nth-child(1) .logoB2::before {/*Position 3*/}

Comme tu as pas mal de niveaux dans ton code, tu seras obligé de cibler la ligne X et ensuite l'image Y (ce pourquoi il y a deux nth-child utilisé dans l'exemple).

Merci Yordi,

j'espérais qu'on puisse utiliser la référence à une balise class unique mais il faut passer par les parents.
par exemple tous les childs de body nomé .logoB , mais bon ça semble pas possible.
je vais utiliser ta solution.

Merci