[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/html\/selectores-avanzados-aprender-html\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/html\/selectores-avanzados-aprender-html\/","headline":"Selectores avanzados: aprender HTML","name":"Selectores avanzados: aprender HTML","description":"Hay muchos selectores especiales en CSS que nos permiten consultar una lista de elementos utilizando m\u00e9todos avanzados. Selectores de ni\u00f1os Los selectores secundarios nos permiten ... Leer m\u00e1s<\/a>","datePublished":"2021-06-22","dateModified":"2021-06-22","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/learn-html.org_.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/learn-html.org_.png","height":200,"width":200},"url":"https:\/\/xn--adrimadiseo-beb.com\/html\/selectores-avanzados-aprender-html\/","about":["Html"],"wordCount":926,"articleBody":"Hay muchos selectores especiales en CSS que nos permiten consultar una lista de elementos utilizando m\u00e9todos avanzados.Selectores de ni\u00f1osLos selectores secundarios nos permiten seleccionar un conjunto espec\u00edfico de elementos secundarios de un elemento de acuerdo con su orden interno.primer hijo, \u00faltimo hijoPara seleccionar el primer y \u00faltimo hijo contenido dentro de un elemento padre, use los selectores: primer hijo y: \u00faltimo hijo. Aqu\u00ed hay un ejemplo:<style>li:first-child { color: blue;}li:last-child { color: green;}<\/style><ul> <li>First item<\/li> <li>Second item<\/li> <li>Third item<\/li> <li>Fourth item<\/li><\/ul>Para asegurarnos de que seleccionamos solo <li> elementos dentro de un <ul> elemento, podemos usar un selector relacional:<style>ul li:first-child { color: blue;}ul li:last-child { color: green;}<\/style><ul> <li>First item<\/li> <li>Second item<\/li> <li>Third item<\/li> <li>Fourth item<\/li><\/ul>nth-child y nth-last-childDe manera similar al primer hijo y al \u00faltimo hijo, podemos seleccionar usando un desplazamiento fijo desde el principio y el final de la lista de hijos del contenedor principal. Eche un vistazo al siguiente ejemplo:<style>ul li:nth-child(2) { color: blue;}ul li:nth-last-child(2) { color: green;}<\/style><ul> <li>First item<\/li> <li>Second item<\/li> <li>Third item<\/li> <li>Fourth item<\/li><\/ul>primero de tipo y \u00faltimo de tipoEl selector de primer tipo es muy similar al selector de primer hijo, solo que es menos restrictivo: solo mira los elementos de su tipo en contraposici\u00f3n al selector de primer hijo.<style>ul li:first-child { color: blue;}ul li:first-of-type { color: red;}ul li:last-of-type { color: green;}<\/style><ul> <dl><dt>First descriptive list item<\/dt><\/dl> <li>First regular list item<\/li> <li>Second regular list item<\/li> <li>Third regular list item<\/li> <li>Fourth regular list item<\/li><\/ul>Observe c\u00f3mo la primera regla CSS para colorear el primer hijo li en azul no hace nada, ya que solo se aplicar\u00e1 al primer elemento hijo, que tambi\u00e9n es un <li> elemento. Este ejemplo tambi\u00e9n muestra que el selector de primero de tipo suele ser menos \u00fatil que su contraparte de primero de tipo.nth-of-type y nth-last-of-typeDe manera similar a la secci\u00f3n anterior, nth-of-type y nth-of-last-type tambi\u00e9n es menos restrictivo al contar elementos similares a su tipo, pero tambi\u00e9n permite seleccionar un elemento usando un desplazamiento fijo desde el inicio o el final del lista.<style>ul li:nth-child(2) { color: blue;}ul li:nth-of-type(2) { color: red;}ul li:nth-last-of-type(2) { color: green;}<\/style><ul> <dl><dt>First descriptive list item<\/dt><\/dl> <li>First item<\/li> <li>Second item<\/li> <li>Third item<\/li> <li>Fourth item<\/li><\/ul>hijo \u00fanico y \u00fanico de tipoEl selector: only-child solo seleccionar\u00e1 un elemento si no tiene ning\u00fan hermano contenido dentro de su elemento padre. El: only-of-type es similar, solo que solo considerar\u00e1 elementos del mismo tipo que \u00e9l.Echemos un vistazo a ambos en acci\u00f3n:<style>ul dl:only-child { color: red;}ul li:only-of-type { color: blue;}<\/style><ul> <dl><dt>Only descriptive list item in the list<\/dt><\/dl> <li>Only list item in the list<\/li><\/ul>Observe c\u00f3mo en este ejemplo el selector de hijo \u00fanico no logra colorear el <dl> elemento en lectura debido a la presencia del <li> elemento como hermano. Sin embargo, para el selector \u00fanico de tipo, tener un <dl> elemento como hermano no es un problema, ya que no hay otros <li> elementos contenidos dentro del mismo padre. Selectores de jerarqu\u00edaselector vac\u00edoEl selector: vac\u00edo se aplica solo a los elementos que est\u00e1n vac\u00edos y contienen solo espacios en blanco y \/ o comentarios HTML. Echemos un vistazo a un ejemplo:<style>ul li { background-color: #cff;}ul li:empty { background-color: #fcf;}<\/style><ul> <li>First item<\/li> <li>Second item<\/li> <li><\/li> <li>Fourth item<\/li><\/ul>Selectores de hermanos adyacentes (+ y ~)Selectores especialesEl selector universalEl no selectorSelectores de atributosSelector de atributos b\u00e1sicosAtributo igual al selector de valor (=)El atributo contiene el selector de valor (~ = y * =)El atributo comienza con selectores (| = y ^ =)El atributo termina con selector ($ =)EjercicioEsta p\u00e1gina a\u00fan no tiene un ejercicio. Le invitamos a contribuir con uno envi\u00e1ndome una solicitud de extracci\u00f3n:https:\/\/github.com\/ronreiter\/interactive-tutorials 4.4 \/ 5 ( 353 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Html","item":"https:\/\/xn--adrimadiseo-beb.com\/html\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"Selectores avanzados: aprender HTML","item":"https:\/\/xn--adrimadiseo-beb.com\/html\/selectores-avanzados-aprender-html\/#breadcrumbitem"}]}]