3

Eu estou começando com css e estou com uma duvida

Eu tenho uma div chamada numeros e dentro dela eu tenho numeros de 01 a 99, como eu posso inserir um circulo em conta deles com css sem precisar usar div ?

<div id="numeros">
01
02
03
04
05
</div>

Obrigado

5
  • É uma pergunta de curiosidade, ou você tem algum impedimento de por as divs (ou qualquer outro elemento que seja) no projeto? Em princípio, sem JS não é possível. Se for com CSS apenas, não tem um seletor pra palavras individuais. Se servir em JS, aí seria o caso de editar a pergunta e acrescentar essa possibilidade.
    – Largato
    Commented 20/04/2016 às 16:31
  • Lembrando que com JS aí não seria mais "sem usar div", pois o JS acrescentaria algum elemento para poder funcionar (se não for div vai ser span, i, mas alguma coisa vai ser acrescentada pelo JS).
    – Largato
    Commented 20/04/2016 às 16:38
  • Então, na realidade eu vou contar de 01 a 9999 então se eu usar div serão 9999 divs. Qual sua sugestão ? Commented 20/04/2016 às 16:38
  • Você está gerando os números em alguma linguagem de programação? Não custa praticamente nada gerar os divs junto. Se o problema é tamanho, gere um <i> ou coisa do tipo. Eu acho que é melhor gerar no servidor e gastar um pouco mais de banda do que fazer por JS e correr o risco de não aparecer como você quer do outro lado, mas só você pode avaliar o que é melhor no seu caso real. Agora, se seu site já é desses que depende de JS pra tudo, um a mais não vai fazer mal.
    – Largato
    Commented 20/04/2016 às 16:39
  • ok, então em js como eu posso contar de 0 10 e inserir as div's e os circulos ? Vou editar o titulo. Commented 20/04/2016 às 16:44

1 Resposta 1

6

Não dá pra fazer isso apenas com CSS (ao menos não sem gambiarras violentas).

Você precisa no mínimo de algo assim:

<div class="circulos">
   <i>1</i>
   <i>2</i>
   ...
</div>

ou qualquer elemento que faça sentido no seu caso, no lugar do i, mas precisa ter alguma coisa "contendo" os números.

Aí, para fazer o círculo, o CSS resolve.

i {
   display:block;
   border-radius:50%;
   border:1px solid green;
}


Gerando os números em JS

Baseado na pergunta adicional nos comentários, eis um JS que já gera os números e spans para o CSS:

// Escolhendo o elemento que receberá a contagem:
var c = document.getElementById('circulos');

// Loop de 1 a 10
var i;
for ( i = 1; i <= 10; i++ ) {
  // Criamos um span:
  s = document.createElement('span');
  // atribuimos o número ao span:
  s.innerText = i;
  // colocamos o span dentro do elemento escolhido:
  c.appendChild( s );
}
/* aqui estilizamos os span dentro de #circulos para o efeito desejado */
#circulos span {
  display:block;
  border-radius:50%;
  width:1.3em;
  height:1.3em;
  margin:4px;
  text-align:center;
  float:left;
  border:2px solid #fc0;
}
<div id="circulos">
</div>

3
  • Agora só uma uma duvida, como eu posso fazer para se caso o i for igual a 5 colocar um background azul no circulo ? Commented 20/04/2016 às 17:25
  • @Desenvolvedor aí é CSS normal, igual qualquer outro. O que você definir no #circulos span vai ser aplicado a todos os circulos. Se quer uma exceção, tem que acrescentar um IF pro número desejado, e mudar o estilo ou elemento dele. Essas coisas você deve fazer tudo na pergunta já na primeira vez, pare evitar ficar respondendo e mudando cada vez que você muda a pergunta. Fica a sugestão de nas próximas, por o máximo de detalhes para podermos ajudar melhor.
    – Largato
    Commented 20/04/2016 às 17:33
  • Um exemplo para ter um dia de cor diferente seria esse: s = document.createElement( i==5 ? 'i' :'span' ); assim no elemento 5 vai valer o css #circulos i, basta criar uma entrada no CSS com #circulos i { /* css desejado somente para o elemento 5 */ }
    – Largato
    Commented 20/04/2016 às 17:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .