Javascript Ajouter Un Attribut Css

| | | | | | | |

Les sélecteurs CSS permettent aux développeurs Web de styliser un élément particulier ou un ensemble d`éléments sur une page Web.

Lorsque vous travaillez avec des sélecteurs, vous pouvez décider de cibler uniquement les éléments avec un attribut particulier. C`est là qu`intervient le sélecteur d`attributs CSS. Le sélecteur d`attributs vous aide à appliquer certains styles uniquement aux éléments dotés d`un attribut spécifique.

Ce didacticiel explique comment utiliser le sélecteur d`attributs CSS lors du style des éléments. À la fin de ce didacticiel, vous aurez une bonne compréhension de l`utilisation du sélecteur d`attributs pour définir des éléments.

Attributs HTML

En HTML, les attributs sont utilisés pour définir des éléments supplémentaires caractéristiques ou propriétés d`un élément. Par exemple, l`attribut height définit la hauteur d`une image et l`attribut title définit le titre d`un élément Web.

Déclarez les attributs en utilisant la structure de paire nom/valeur. Cela signifie qu`un attribut comme celui-ci apparaîtra dans un fichier HTML : name="value". Pour en savoir plus sur les attributs HTML, lisez notre guide des attributs HTML .

Sélecteur d`attributs CSS

Lors de la conception d`un site, vous souhaiterez peut-être styliser les éléments en fonction de leur valeur d`attribut ou non. Pour ce faire, vous utilisez le sélecteur d`attributs CSS.

Les deux étapes à suivre lors de l`utilisation du sélecteur d`attributs sont :

  1. Envelopper un attribut ` s entre crochets.
  2. Spécifiez les styles que vous souhaitez appliquer aux attributs portant ce nom.

Explorons quelques exemples de sélecteur d`attributs CSS en action.

CSS [Attribut]

La forme la plus basique de l`attribut selector est : [attribute]. En d`autres termes, placez le nom d`un attribut entre crochets.

Supposons que nous voulions définir la taille de la police de chaque élément avec un attribut de titre sur 16px. Nous pouvons le faire en utilisant ce code :

Notre code de règle CSS s`applique uniquement aux éléments avec un attribut title. La taille de la police de tout élément avec un attribut de titre spécifié, quelle que soit la valeur stockée par l`attribut, passera à 16px selon la règle ci-dessus.

Vous pouvez faire votre sélecteur d`attribut plus précis en spécifiant l`un ou les deux éléments suivants :

Par exemple, supposons que vous vouliez définir la taille de tout le texte dans le paragraphe en-tête à 16px. Vous pouvez le faire en utilisant ce code :

La lettre p au début de l`attribut selector indique au navigateur d`appliquer le style de police uniquement aux balises

. La partie [title] du sélecteur indique au navigateur d`appliquer le style de police uniquement aux

tags avec un attribut title spécifié.

T Ainsi, après avoir lu ce code, le navigateur convertira la taille de police de tous les titres de paragraphe (p) en 16px. Ce code n`affectera aucun autre texte de la page.

Le sélecteur d`attributs [attribute = "value"] permet aux programmeurs d`appliquer des styles aux éléments uniquement. Attribut dont les valeurs ‚Äã‚Äãsont égales à la valeur spécifiée dans le sélecteur.

Supposons que nous voulions définir la couleur d`arrière-plan de tous les liens de la page d`accueil Python.Engineering sur orange. Ce style doit définir la couleur d`arrière-plan de l`élément a sur orange. Nous pouvons effectuer cette action en utilisant le code CSS suivant :

Cette règle sélectionne tous les éléments de votre page Web dont l`attribut href est égal à python.engineering. Définissez ensuite la couleur de fond de tous ces éléments sur orange.

CSS [attribut ~ = "valeur"]

Le [attribut ~ = & ldquo Le sélecteur ; value "] vous permet de sélectionner des éléments avec des valeurs d`attribut ‚Äã‚Äãqui contiennent un mot spécifique.

Par exemple, supposons que vous vouliez appliquer un style à tous les p dont les titres correspondent au mot bleu. Pour ce style, la couleur du texte de ces éléments doit être changée en bleu.

Nous pouvons utiliser la règle suivante pour ce faire :

Cette règle va trouver toutes les balises

associées aux titres contenant le mot "bleu" et définir la couleur du texte dans ces balises

bleu. Ainsi, si un

tag a pour titre color blue ou color blue, ce style sera appliqué. Cependant, cette règle non s`applique à une balise

avec le titre blueColor car le mot b lue n`est pas présent indépendamment dans l`attribut.

Ceci est différent de * = selector, qui non seulement peut trouver un mot spécifique dans un attribut, mais peut également trouver une valeur spécifique dans un attribut.

CSS [attribut | = "valeur"]

Le [attribut | = "value"] selector vous permet de sélectionner des éléments dont les attributs commencent par une certaine valeur (par exemple, "Top"). Cela inclut les éléments avec des attributs commençant par la valeur spécifiée et contenant un trait d`union suivi d`un texte supplémentaire (par exemple, "top-style" et d`autres valeurs "top-") Notez que le code nécessite une barre verticale (|) après le mot " Class.‚"

Par exemple, supposons que vous souhaitiez attribuer un rembourrage supérieur de 10 pixels à chaque avec un attribut de classe commençant par top, y compris ceux suivis d`autres valeurs ‚Äã‚Äãséparées par des tirets. Vous pouvez le faire en utilisant ce code :

Cette règle appliquera un rembourrage de 10px en haut de chaque

Il est important de noter que la valeur spécifiée doit être un seul mot entier ou un mot suivi d`un trait d`union. En d`autres termes, notre style ci-dessus s`appliquerait aux éléments avec la classe nom topstyle.

CSS [attribut ^ = "value‚"]

Le [attribut ^ = & ldquo Le sélecteur ; value ‚"] est utilisé pour sélectionner des éléments dont la valeur d`attribut commence par une valeur spécifique. La valeur spécifiée ne doit pas nécessairement être un mot entier, contrairement à [attribute | = "value"] dont nous avons parlé plus tôt.

Supposons que nous voulions appliquer un pad de moins de 10 pixels à chaque élément

Le navigateur Web de l`utilisateur appliquera le style padding-bottom que nous avons défini à toutes les balises

CSS [attribute $ = "value‚"]

L`opérateur $ = est utilisé pour sélectionner tous les éléments dont les valeurs d`attribut ‚Äã‚Äã se terminent par une certaine valeur. Par exemple, supposons que vous vouliez changer la couleur du texte en gris de tout le texte hypertexte dont les valeurs d`attribut href se terminent par .app. Vous pouvez le faire en utilisant ce code :

Ce sélecteur sera appliqué à tous les éléments de votre page Web dont les valeurs href ‚Äã‚Äãse terminent par .app .

CSS [attribute * = "value"]

L`opérateur * = permet de sélectionner tous les éléments dont les valeurs ‚Äã‚Äãd `attribut contiennent un particulier évaluer. Contrairement à l`opérateur ~ =, ce sélecteur d`attribut peut trouver une valeur particulière dans une classe, pas seulement un seul mot.

Fo Par exemple, supposons que nous voulions appliquer un rembourrage de 50 pixels autour de toutes les balises

Cette règle définira un rembourrage de 50px autour de tous les éléments HTML avec des attributs at class contenant le terme allPadding. Ainsi, les éléments avec les noms de classe new allPadding, surround allPadding red, allPaddingblue et allPadding-true seront tous sous réserve de ce style.

Conclusion

Le sélecteur d`attribut CSS permet aux développeurs de sélectionner des éléments en fonction des valeurs d`attribut ‚Äã‚Äãet d`appliquer des styles spécifiques à ces éléments.

p>

Ce tutoriel a expliqué, en se référant à des exemples, les bases des sélecteurs d`attributs et comment utiliser tous les types de sélecteurs d`attributs CSS. Vous êtes maintenant prêt à commencer à utiliser CSS Attribute Selector comme un pro.


Le CSS est l`une des trois principales compétences utilisées dans le développement Web.Téléchargez l`application
Python.Engineering gratuit aujourd`hui pour parler avec un coach de carrière expérimenté qui peut vous conseiller sur les compétences dont vous avez besoin pour poursuivre une carrière de développeur Web.

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method