Como dijo Pariket Thakur, puede usar document.querySelector("your selectors") .

Si desea seleccionar varios elementos, use document.querySelectorAll("your selectors") .

Por ejemplo:

 var elements = document.querySelectorAll("p:nth-child(2n+1)"); for (i = 0; i < elements.length; i++) { elements[i].style.color = "red"; }

 <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p>

Consulte W3Schools para obtener más información.

No está claro si desea editar el selector o la propiedad de la regla. El fragmento de código a continuación puede hacer ambas cosas.

 class Css { addRule(selector, properties) { const rule = this.styleSheet.insertRule(selector + ' ' + properties); this[selector] = this.styleSheet.rules[rule]; return this[selector]; } createStyleSheet() { const styleElement = document.head.appendChild(document.createElement('style')); this.styleSheet = document.styleSheets[document.styleSheets.length - 1]; return this; } } const css = new Css().createStyleSheet(), pNth = css.addRule('p:nth-child(1)', '{color: red; position: relative;}'); // A use-case showing how to use the stored rule setInterval(_ => { const index = Math.floor(Math.random() * 3) + 1; // Change selector via selectorText property css['p:nth-child(1)'].selectorText = `p:nth-child(${index})`; // Edit/add a property via style property pNth.style.left = `${index}em`; }, 500);

 <div> <p>Text</p> <p>Chapter</p> <p>Paragraph</p> </div>

Cuando un documento contiene varias hojas de estilo grandes, es difícil y lleva mucho tiempo encontrar una regla correcta para editar. Además, la mayoría de los navegadores no le permiten modificar las hojas de estilo de dominios cruzados. Estos problemas se pueden resolver creando un elemento de style en línea en la sección de encabezado del documento y agregando las nuevas reglas a esa hoja de estilo. Es notable que las reglas de la hoja de estilo en línea tienen una mayor especificidad, por lo tanto, las reglas agregadas pueden romper la cascada planificada, aunque también asegura que las reglas editadas también se apliquen al documento.

Una instancia de la clase Css contiene dos métodos. createStyleSheet crea un nuevo elemento de estilo y lo agrega al encabezado y devuelve la instancia en sí. addRule agrega nuevas reglas a la hoja de estilo recién creada de acuerdo con los argumentos que se le pasan. El método también almacena referencias a las reglas que crea en una propiedad nombrada por el selector pasado. Finalmente, el método devuelve una referencia a la regla recién creada.

Cuando necesite agregar una regla, llame al método addRule . No es obligatorio almacenar el valor de retorno en una variable, siempre puede hacer referencia a la regla usando el objeto css y el selector original de la regla para cambiar el selector o las propiedades de la regla.

puedes usar document.querySelector()