C\u00f3mo encontrar selectores de CSS<\/h2>\n
Solo necesitas una herramienta y ya la tienes: \u00a1un navegador!<\/p>\n
Cada navegador tiene un conjunto de herramientas<\/a> de desarrollo<\/a> que se pueden utilizar para examinar un sitio web. Usar\u00e9 Chrome<\/a>, pero puedes usar cualquier navegador moderno que desees. Todos tienen un conjunto de herramientas extremadamente similar.<\/p>\n Primero, abra su p\u00e1gina de inicio en una nueva pesta\u00f1a.<\/p>\n Haga clic con el bot\u00f3n derecho en cualquier lugar de la p\u00e1gina y seleccione la opci\u00f3n "Ver c\u00f3digo fuente". Esto abrir\u00e1 una p\u00e1gina que se ve as\u00ed en una nueva pesta\u00f1a:<\/p>\n El c\u00f3digo fuente de www.competethemes.com<\/p>\n Este es el HTML sin procesar de la p\u00e1gina web. Esto es lo que ver\u00e1n Google, su navegador y cualquier otro software cuando visite su sitio. Es el c\u00f3digo que su navegador representa en un sitio web con el que puede interactuar.<\/p>\n Es importante comprender que todas las p\u00e1ginas de su sitio est\u00e1n hechas de HTML como este.<\/p>\n Si bien es bueno ver el c\u00f3digo detr\u00e1s del sitio web, hay una forma mejor y m\u00e1s \u00fatil para que lo veamos.<\/p>\n Regrese a su p\u00e1gina de inicio, haga clic con el bot\u00f3n derecho en cualquier parte de la p\u00e1gina y, esta vez, seleccione la opci\u00f3n "Inspeccionar" (podr\u00eda decir "Inspeccionar elemento"). Esto abrir\u00e1 las herramientas de desarrollo de su navegador presentando una ventana como esta:<\/p>\n Esta es otra forma de ver el mismo HTML que acaba de ver al ver el c\u00f3digo fuente. La diferencia es que ahora tenemos una jerarqu\u00eda con la que podemos navegar e interactuar.<\/p>\n Si todo esto parece extra\u00f1o y abrumador, est\u00e1 bien. El objetivo aqu\u00ed no es dominar las herramientas de desarrollo de su navegador, es encontrar un selector de CSS en el sitio.<\/p>\n En sus herramientas de desarrollador, hay un lado izquierdo y un lado derecho. El lado izquierdo tiene una jerarqu\u00eda del HTML que podemos navegar. Puede ignorar el lado derecho por completo.<\/p>\n Ahora, si pasa el mouse sobre los elementos HTML en las herramientas de desarrollo, notar\u00e1 algo realmente genial. Cada elemento se resalta en la p\u00e1gina al pasar el cursor sobre \u00e9l.<\/p>\n Esto facilita el acceso al elemento que desea. De hecho, no es necesario comprender el HTML para encontrar el elemento que est\u00e1 buscando.<\/p>\n Hay dos formas de llegar r\u00e1pidamente al elemento al que debe dirigirse.<\/p>\n Digamos que necesito acceder a un enlace en mi paginaci\u00f3n. Puedo hacer clic con el bot\u00f3n derecho en alg\u00fan lugar de la p\u00e1gina y luego usar las flechas desplegables para llegar al enlace.<\/p>\n Cada vez que hago clic en una flecha, revela los elementos contenidos dentro de ese elemento. Esto suele ser necesario, pero el siguiente m\u00e9todo puede ser incluso m\u00e1s f\u00e1cil y r\u00e1pido.<\/p>\n A veces puede seleccionar el elemento exacto que desea. Para hacer esto, haga clic derecho en el elemento y las herramientas de desarrollo se abrir\u00e1n resaltando ese elemento.<\/p>\n A continuaci\u00f3n, le mostramos c\u00f3mo navegar al mismo enlace de paginaci\u00f3n con este m\u00e9todo m\u00e1s r\u00e1pido.<\/p>\n Una vez que haya localizado el elemento HTML que est\u00e1 buscando, el \u00faltimo paso es copiar el selector de CSS<\/a>.<\/p>\n En la captura de pantalla a continuaci\u00f3n, puede ver que estoy flotando sobre el enlace de la p\u00e1gina dos.<\/p>\nVer el HTML de su sitio<\/h3>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-6170021ca44f7.png\")
<\/a><\/p>\nObtenga una mejor vista del HTML<\/h3>\n
Navegar por el HTML<\/h3>\n
M\u00e9todo 1: navegar usando las flechas<\/h4>\n
M\u00e9todo 2: haga clic con el bot\u00f3n derecho en el elemento<\/h4>\n
Obt\u00e9n el selector de CSS<\/h3>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-61700222c9d2d.png\")
<\/a><\/p>\n