Pb de compréhension règle CSS wordpress

Bonjour,

J'essaie de créer un thème enfant wordpress et je bataille pour le moment à comprendre cette règle :

[class*="site"]:after {
    content: "";
    display: table;
}

1) Je ne comprends pas ce que le sélecteur vise
2) que fait : content: "";

Merci d'avance si qq un peut m'aiguiller

Rati

règle complète

extrait de style.css

/* Clearing floats */

.footer-sidebar:before,
.footer-sidebar:after,
.hentry:before,
.hentry:after,
.slider-direction-nav:before,
.slider-direction-nav:after,
.contributor-info:before,
.contributor-info:after,
.search-box:before,
.search-box:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
    content: "";
    display: table;
}

Bonjour

1) :after et :before sont des pseudo-éléments, ils visent des éléments imaginaires placés après et avant l'élélement
2) content: "" permet de donner un contenu à l'élément ainsi «créé» en CSS

Ce code fait partie d'un clearfix dans le genre:
http://nicolasgallagher.com/micro-clearfix-hack
ou
http://davidwalsh.name/css-clear-fix

Pour en savoir plus sur le clearfix: Empêcher les flottants de dépasser de leur conteneur

Pour le clearfix, @kustolovic a raison.

Pour le sélecteur, tu as pensé à chercher ?

Les spécifications sont précises, et de nombreux liens explicatifs existent pour les sélecteurs d’attributs.

En l’occurrence celui-ci cible tous les éléments dont l’attribut class contient au moins une fois la chaîne de caractère « site », par exemple :

class="site machin"
class="site-truc"
class="bidule site autre"

etc.

Bonne continuation !

Merci à tous les 2

>Ten : oui j'ai passé ma matinée à chercher, mais je ne trouvais que des réponses du genre

P[Attr~=Valeur] or dans ma règle je n'ai pas de balise auquel s'appliquait l'attribut ....

Mais je crois que ta réponse commence à m'éclairer un peu (pour l'instant plus la lueur d'une led que d'un gros projo) mais je vais essayer de monter un peu en puissance

>kustolovic : ok je vais me frotter à tes liens

Je verrais pour le résolu ensuite

En effet un sélecteur d’attribut n’a pas besoin d’autres informations, tout comme un sélecteur de classe n’a pas besoin de spécifier un élément ou un identifiant en plus.

C’est d’ailleurs bien pratique : si plusieurs éléments différents n’ont en commun qu’un attribut spécifique, tu pourras les cibler simplement.

À noter d’ailleurs : le poids d’un sélecteur d’attribut est moindre que celui d’un sélecteur de classe. Ainsi dans :

.site { color: blue; }
[class="site"] { color: red; }

Les éléments disposant de la classe site auront une couleur bleue C’est bon à savoir !

Bonjour,

ce qui t'intrigue aussi est peut-être ce caractère * devant le signe =.

Voici de quoi éclairé ta lanterne : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#attribute-selectors

++

JeanSaisrien a écrit :
>Ten : oui j'ai passé ma matinée à chercher, mais je ne trouvais que des réponses du genre

P[Attr~=Valeur] or dans ma règle je n'ai pas de balise auquel s'appliquait l'attribut ....

Si l'élément n'est pas précisé devant alors tous les éléments sont ciblés. Ça a le même effet que *[attr="valeur"] (* étant le sélecteur universel d'élément) mais c'est optionnel (et du coup ça ne compte pas dans la spécificité du sélecteur). Le seul cas où on est forcé d'écrire ce sélecteur universel c'est quand il n'y a rien d'autre, comme * { box-sizing: border-box }