CODEWITHSUNDEEP
javascripthtmljquery
MetricalJa
MetricalJa

Reputation: 3

How to change the color of the first item of a li tag list?

I would like to solve this question: I am having problems so that the first item of each li tag list has its color changed when clicking on a button (preferably created). I already tried to create an id for each first item of the lists, inside the li tag, without success. Here is the code below:

$(document).ready(function(){
    $("#botao").click(function(){
      $("p").css("color", "red");
    });
  });

<!-- begin snippet: js hide: false console: true babel: false -->
<!--- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com
que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Criando páginas com jQuery</h1> 
</div>
  
<div class="container mt-5">
  <div class="row div1">
    <div class="col-sm-4 coluna1">
      
      <div id="texto">

<!-- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com 
que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->   

      
    </div>
    <div class="col-sm-4 coluna2">
      <p class="classC">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p class="classD">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4 coluna3">      
      <p class="classE">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p class="classF">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      <!-- Muda a cor dos parágrafos-->
      <p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p><input id="botao" type="button" class="btn btn-warning btn-xs 189738" value="Mudar de cor"/>
      <!-- Altera o texto do botão-->
      
      <div> <td class="btnDoc"><br>
           <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Clique aqui</button>
           </td>
       </div>
    </div>
      <ul>
        <!--Crie um seletor que altere a cor do texto do primeiro item de todas as listas. -->

        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>

    </div>
<div>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>
<div class="row div3">
  <div>
    <ul>
      <li>C++</li>
      <li>JAVA</li>
      <li>Python</li>
      <li>HTML/CSS</li>
    </ul>
  </div>

</div>
    
  </div>
  <div class="row div2">
    <h1>x caracteres</h1>
    <div class="col-12">
    <input class="contar" type="text" value="Vamos contar os caractesres?"/>
    </div>
  </div>
</div>
<div class="container-fluid rodape">

</div>

<script src="2jquery.js"></script>
<script src="Jcollor.js"></script>

</body>
</html>

The "click here" button should work with the other js I provided in the question.

Upvotes: 0

Views: 73

Answers (1)

Arthur Borba
Arthur Borba

Reputation: 463

Try this:

$(document).ready(function(){
    $("#botao").click(function(){
      $("ul li:first-child").css("color", "red");
    });
  });

Reference: :first-child selector

Upvotes: 1

Related Questions