Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

douglasdeodato

[Resolvido] css para especifico ul ou li

Por , em Desenvolvimento frontend

Recommended Posts

douglasdeodato    2

douglasdeodato
Postado

galera tenho um codigo html com varios ul e li, sendo que nao posso aplicar uma classe no codigo html e atribuir valores pai e filho e assim aplicar o estilo.

 

minha duvida 'e como faco pra definir ul numero 5 cor azul, ul numero 6 cor vermelha. so com css, existe isso? ou so com jquery?

 

<html>

<body>
<ul>
<li><li>
</ul>

<ul>

</ul>

<ul>

</ul>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian Madrid    1

Cristian Madrid
Postado

galera tenho um codigo html com varios ul e li, sendo que nao posso aplicar uma classe no codigo html e atribuir valores pai e filho e assim aplicar o estilo.

 

minha duvida 'e como faco pra definir ul numero 5 cor azul, ul numero 6 cor vermelha. so com css, existe isso? ou so com jquery?

 

<html>

 

<body>

<ul>

<li><li>

</ul>

 

<ul>

 

</ul>

 

<ul>

 

</ul>

 

</body>

 

</html>

 

 

Voce pode definir com o javascript mesmo: segue o/

 

window.addEventListener('load',function(){
  var ul = document.getElementsByClassName('pai1')
   ul[0].getElementsByTagName('li')[4].setAttribute('class','azul');
   ul[0].getElementsByTagName('li')[5].setAttribute('class','vermelho');
   //onde o numero entre os colchetes é o index do elemento no array;

},false);

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdeodato    2

douglasdeodato
Postado

vejam o codigo

 

<div class="contentboxinside">
<h2>
<a name="subscribe-blog"></a>
<form id="subscribe-blog" accept-charset="utf-8" method="post" action="">
<form id="searchform" action="http://marketing.whatclinic.com/" method="get" role="search">
<h2>
<ul class="tweets">

</ul>
<div class="textwidget">  </div>
<h2>Recent Posts</h2>
----> quero pegar esse <ul>
					<li>linha1</li>
				  </ul>
<h2>Meta</h2>
<ul>
<li>linhametaaa</li>
</ul>

</div>

 

 

 

o ultimo ul eu consigo pegar com:

 

div ul:last-child li a:last-child

 

mas quero pegar o antes dele e nao consigo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian Madrid    1

Cristian Madrid
Postado 

<div class="contentboxinside">
<h2>
<a name="subscribe-blog"></a>
<form id="subscribe-blog" accept-charset="utf-8" method="post" action="">
<form id="searchform" action="http://marketing.whatclinic.com/" method="get" role="search">
<h2>
<ul class="tweets">

</ul>
<div class="textwidget"> </div>
<h2>Recent Posts</h2>
----> quero pegar esse <ul>
<li>linha1</li>
</ul>
<h2>Meta</h2>
<ul>
<li>linhametaaa</li>
</ul>

</div>

 

Se for somente adicionar um style pra ele, é só adicionar um Class no elemento que você deseja, porem se ele vier dinamicamente, você deve buscalo pelo index dele e colocar um class com o setAttribute igual ao que mencionei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdeodato    2

douglasdeodato
Postado

cristian 'e bem simples adicionar a classe mais nesse caso nao posso.

 

vou ver que posso fazer.

 

como setaria isso pra esse codigo cristian?

 

isso 'e apenas javascript isso? nao precisa de jquery library.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian Madrid    1

Cristian Madrid
Postado

Isso é apenas Javascript mesmo, não precisa importar nada (It's Works (^^)/ )

 

<script type="text/javascript">
  window.addEventListener('load',function(){
     var elements = document.getElementById('contentboxinside').getElementsByTagName('ul'); 
  // aqui eu criei um array de nodes que contem todos os elementos ul e filhos
     elements[1].setAttribute('class','verde');
  //Aqui eu adiciono o class no segundo(array começa em 0) elemento 'ul' da lista
  },false);
</script>

 

<div id="contentboxinside">
<h2>
<a name="subscribe-blog"></a>
<form id="subscribe-blog" accept-charset="utf-8" method="post" action="">
<form id="searchform" action="http://marketing.whatclinic.com/" method="get" role="search">
	<h2>
	<ul class="tweets">
	</ul>
	<div class="textwidget">  </div>
	<h2>Recent Posts</h2>

	<ul>
		<li>linha1</li>
	</ul>
	<h2>Meta</h2>
	<ul>
		<li>linhametaaa</li>
	</ul>

</div>

 

Aqui eu somente modifiquei o tipo de identificador do 'contentboxinside', passe de 'class' para 'id'.

 

*Dica: Sempre procure identar seu código para facilitar a compreensão tanto de hierarquia, quanto de funcionamento ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@douglasdeodato,

 

você tá customizando uma sidebar do WordPress ne?!

 

Existem classes personalizadas para cada widget sim. Dá uma inspecionada no código fonte que você vai perceber, q não precisa identificar pela posição do LI não. Mas pela classe única dele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdeodato    2

douglasdeodato
Postado

sssshowwwww cristian era isso mesmo.

 

obrigado.

 

me diz uma coisa isso ae add em todas linhas do ul, como seria pra aplicar uma classe na li, outra na li2, outra la li 3?

<ul>

<li>linha1</li>

<li>linha2</li>

<li>linha3</li>

</ul>

 

 

--

 

sim william, o f*** que o cara tirou todas as classese instalou uns plugins loucos que nao pegam style e tenho q usar eles nao posso instalar outros, seria bem facil personalizar ja q o wordpress ja vem as classes, mais ta uma macarronada o codigo.

 

ja resolvi :)

 

valeu galera.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito