{"id":1349,"date":"2024-08-01T19:08:25","date_gmt":"2024-08-01T17:08:25","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1349"},"modified":"2024-08-01T19:08:26","modified_gmt":"2024-08-01T17:08:26","slug":"47-selectores-de-atributo-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/47-selectores-de-atributo-css\/","title":{"rendered":"47. Selectores de atributo CSS"},"content":{"rendered":"\n

Es posible dise\u00f1ar elementos HTML que tengan atributos<\/strong> o valores de atributos espec\u00edficos.<\/p>\n\n\n\n\n\n\n\n

El selector CSS [atributo]<\/h2>\n\n\n\n

Es usado para seleccionar elementos con un atributo espec\u00edfico.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

a[target] {\n  background-color: yellow;\n}<\/pre>\n\n\n\n
El selecto CSS [atributo=\u00bbvalor\u00bb]<\/h2>\n\n\n\n
El selector [atributo=\u00bbvalor\u00bb] se utiliza para seleccionar elementos con un atributo y valor especificados.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
a[target=\"_blank\"] {\n  background-color: yellow;\n}<\/pre>\n\n\n\n
CSS [atributo~=\u00bbvalor\u00bb] Selector<\/h2>\n\n\n\n
El selector [atributo~=\u00bbvalor\u00bb] se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra espec\u00edfica.<\/p>\n\n\n\n
El siguiente ejemplo selecciona todos los elementos con un atributo de t\u00edtulo que contiene una lista de palabras separadas por espacios, una de las cuales es \u00abflor\u00bb.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      [title~=\"flor\"] {
        border: 5px solid yellow;
      }
    <\/style>
  <\/head>
  <body>
    <h2>CSS [atributo~=\"valor\"] Selector<\/h2>
    <p>
      Todas las im\u00e1genes con el atributo de t\u00edtulo que contiene la palabra
      \"flor\" tienen un borde amarillo.
    <\/p>

    <img src=\"klematis.jpg\" title=\"klematis flor\" width=\"150\" height=\"113\" \/>
    <img src=\"img_flwr.gif\" title=\"flor\" width=\"224\" height=\"162\" \/>
    <img src=\"img_tree.gif\" title=\"tree\" width=\"200\" height=\"358\" \/>
  <\/body>
<\/html><\/pre>\n\n\n\n
El ejemplo anterior har\u00e1 coincidir los elementos con title=\u00bbflor\u00bb, title=\u00bbsummer flor\u00bb y title=\u00bbflor new\u00bb, pero no title=\u00bbmy-flor\u00bb o title=\u00bbflores\u00bb.<\/p>\n\n\n\n
CSS [atributo|=\u00bbvalor\u00bb] Selector<\/h2>\n\n\n\n
El selector [atributo|=\u00bbvalor\u00bb] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor puede ser exactamente el valor especificado, o el valor especificado seguido de un gui\u00f3n (-). El valor debe ser una palabra completa, ya sea sola, como class=\u00bbtop\u00bb, o seguida de un gui\u00f3n (-), como class=\u00bbtop-text\u00bb.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
[class|=\"top\"] {\n  background: yellow;\n}<\/pre>\n\n\n\n
CSS [atributo^=\u00bbvalor\u00bb] Selector<\/h2>\n\n\n\n
El selector [atributo^=\u00bbvalor\u00bb] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor comienza con el valor especificado. El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con \u00abtop\u00bb.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
[class^=\"top\"] {\n  background: yellow;\n}<\/pre>\n\n\n\n
CSS [atributo$=\u00bbvalor\u00bb] Selector<\/h2>\n\n\n\n
El selector [atributo$=\u00bbvalor\u00bb]<\/strong><\/em> se usa para seleccionar elementos cuyo valor de atributo termina con un valor espec\u00edfico. El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina con \u00abtest\u00bb.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
[class$=\"test\"] {\n  background: yellow;\n}<\/pre>\n\n\n\n
CSS [atributo*=\u00bbvalor\u00bb] Selector<\/h2>\n\n\n\n
El selector [atributo*=\u00bbvalor\u00bb]<\/strong><\/em> se utiliza para seleccionar elementos cuyo valor de atributo contiene un valor espec\u00edfico. El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que contiene \u00abte\u00bb.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
[class*=\"te\"] {\n  background: yellow;\n}<\/pre>\n\n\n\n
Dando estilo a los formularios<\/h2>\n\n\n\n
Los selectores de atributos pueden ser \u00fatiles para dise\u00f1ar formularios sin clase o ID.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=\"text\"] {
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
      }

      input[type=\"button\"] {
        width: 120px;
        margin-left: 35px;
        display: block;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Styling Forms<\/h2>

    <form name=\"input\" action=\"\" method=\"get\">
      Firstname:<input type=\"text\" name=\"Name\" value=\"Peter\" size=\"20\" \/>
      Lastname:<input type=\"text\" name=\"Name\" value=\"Griffin\" size=\"20\" \/>
      <input type=\"button\" value=\"Example Button\" \/>
    <\/form>
  <\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Es posible dise\u00f1ar elementos HTML que tengan atributos o valores de atributos espec\u00edficos.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":46,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1349","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Es posible dise\u00f1ar elementos HTML que tengan atributos o valores de atributos espec\u00edficos.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1349"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1349\/revisions"}],"predecessor-version":[{"id":1352,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1349\/revisions\/1352"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}