Alterar las clases usando CSS con espacios en el nombre de la clase - html, css, twitter-bootstrap, ruby-on-rails-4

¿Cómo altero una clase en CSS que tiene espacios en el nombre de la clase?

Quiero alterar esta clase:

<div class="navbar-collapse collapse">

¿Cómo lo selecciono en el archivo CSS?

.navbar-collapse collapse{

}

No parece funcionar.

Respuestas

1 para la respuesta № 1

1) No hay espacios en las clases. Las posibles convenciones de nomenclatura son: foo-bar (guión), fooBar (camelCased), foo_bar (caso de serpiente), o simplemente foobar.

Dado:

  <div class="navbar-collapse collapse">

CSS objetivo:

.navbar-collapse.collapse

El espacio de la forma en que lo escribiste diría que el colapso es un nodo secundario, así que selecciona el colapso div que es el hijo del colapso de la barra de navegación, al que se asemejaría el marcado:

 <div class="navbar-collapse">
<div class="collapse">foo</div>
</div>

Los profesionales utilizan diferentes convenciones de nomenclatura para denotar diferentes COSAS. Cada equipo es diferente, pero generalmente se trata de esto:

1. Me gusta usar guiones para mis clases de css: foo-bar
2. Snake_case para ids: #foo_bar
3. Nunca camel case css, pero algunas personas lo hacen para indicar que esta clase está escrita desde Javascript.
4. Si uno de mis desarrolladores escribiera una clave de clase css de dos palabras, se burlaría de él.

---

1 para la respuesta № 2

Los espacios que ve significan que el elemento div tiene varias clases en lugar de un espacio en el nombre de la clase.

Usted podría apuntar este elemento en su CSS con cualquiera .navbar-collapse o .collapse.

Si quisieras afectar solo los elementos con ambas clases usarías .navbar-collapse.collapse.

.navbar-collapse {
// CSS for elements with a class of "navbar-collapse".
}

.collapse {
// CSS for elements with a class of "collapse".
}

.navbar-collapse.collapse {
// CSS for elements with a class of both "navbar-collapse" and "collapse".
}

---