[Résolu] Nth-child, nth-of-type avec pseudo classes

Bonjour,

J'essaie de simplifier mes feuilles de styles en utilisant des pseudo-classes.
Voici mon code simplifié:

<div class="bg-SiteHeader"></div>
<div class="bg-SiteContent"></div>
<div class="bg-SiteFooter"></div>

[class|="bg"] {
    margin-bottom: 1.28rem;
    border: solid 1px orange;
}
    [class|="bg"]::after {
	content: "";
	display: table;
	clear: both;
    }	

Ce qui ne fonctionne pas:

[class|="bg"]::nth-of-type(1) {	background: green;	}
[class|="bg"]::first-of-type { background: green; }
[class|="bg"]::first-child {	background: green;	}

Je voudrai d'abord régler ce problème avant de continuer avec les blocs à l'intérieur de ces groupes, du genre b-BlockName.( où j'ai aussi le même problème).
Cordialement
Modifié par cpalo (16 May 2017 - 15:17)

Bonjour,

Premièrement il ne faut que : et non ::
Deuxièmement tu tentes de changer un background au lieu d'un border-color

Modifié par _laurent (16 May 2017 - 15:23)

Je pensais que les pseudo-classes c'était :: et les pseudo-éléments : . Mais si le simple : est correct, alors autant l'utiliser.
Je vais donc préciser mon exemple:
[class|="bg"] { border: solid 1px orange;} fonctionne correctement et il y a bien une bordure autour de chacune des trois div.
Maintenant ce que je cherche à faire et qui ne fonctionne pas, c'est attribuer un background sur la premiere div.