IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

le pseudo sélecteur first letter inactif ?


Sujet :

CSS

  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 032
    Points : 65 480
    Points
    65 480
    Billets dans le blog
    1
    Par défaut le pseudo sélecteur first letter inactif ?
    Le but mettre tout en minuscule puis mettre la première lettre en majuscule:
    https://jsfiddle.net/60xfhucw/

    la pseudo classe :first-letter ne fonctionne pas
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 032
    Points : 65 480
    Points
    65 480
    Billets dans le blog
    1
    Par défaut
    Bon je m'auto réponds

    j'essayais de l'attribuer sur une balise a incluse dans un li ...

    A priori ça ne fonctionne pas sur la balise a ????

    https://jsfiddle.net/sw7gtq0d/

    Mais j'ai remonté la class au niveau du li parent et ça fonctionne !!! Allez comprendre
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Bonjour,

    Après test rapide, il semblerait que ::first-letter ne fonctionne pas avec une balise en display:inline (comme <span>, par défaut).

    essaie avec :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .ucfirst {
        display:inline-block; 
      text-transform: lowercase;
    }
    TA DAAAA !!

    EXPLICATION :


    Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d'un bloc,
    si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 032
    Points : 65 480
    Points
    65 480
    Billets dans le blog
    1
    Par défaut
    En effet !!! Merci Jreaux cela explique pourquoi cela ne fonctionne pas sur la balise a ni span ...
    https://jsfiddle.net/zdb18409/

    Mais pourquoi diable cette restriction liée au inline ????

    Et du coup pourquoi ça passe quand on la remonte sur le parent ???
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 753
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 753
    Points : 39 987
    Points
    39 987
    Par défaut
    Bonjour,
    Mais pourquoi diable cette restriction liée au inline ????
    à l'origine cela a été intégré pour réaliser les lettrines ce qui n'a pas de sens autre qu'en début d'un paragraphe ou plus généralement en début d'un bloc.

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 032
    Points : 65 480
    Points
    65 480
    Billets dans le blog
    1
    Par défaut
    Certes, mais pourquoi l'héritage fonctionne-t-il alors? Il y a parfois des logiques qui m'échappent ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 753
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 753
    Points : 39 987
    Points
    39 987
    Par défaut
    Le « contenant bloc » utilise le textContent, en incluant les pseudos éléments :before, faisant fi sa structure interne, teste avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    p:first-letter {
      font-size: 2em;
      font-weight: 700;
      color: #F00;
    }
    p.with-before::before {
      content: "Lorem"
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <p class="with-before"> ipsum dolor sit amet ...
    <p>Lorem ipsum dolor sit amet ...
    <p><span>Lorem</span> ipsum dolor sit amet ...

  8. #8
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Bonjour,

    c'est surtout quand on utilise le :before pour autre chose (icône,...)... "qu'on l'a dans l'os"...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Obtenir le même rendu pour le pseudo-element :first-letter
    Par Vincent668 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/02/2019, 17h00
  2. [IE6] Pseudo classes first-child et last-child
    Par sliderman dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/07/2008, 20h10
  3. hover et first-letter
    Par calagan99 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 18/11/2007, 15h49
  4. [W3C] Espacement First-Letter sous IE
    Par Emcy38 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 21/08/2006, 21h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo