How do I turn a class into a clickable text?

Question

Here’s the class I wanted to turn into a clickable text

 <li class="content__container__list__item">Select a Language !</li>

I hope someone tells me how I can do this!

Answer 1

The question was a little vague, but come on... I understand two things by a "clickable text": 1. a text that changes the mouse when you pass over it and change the color of the text when you click; 2. a text that executes certain commands, usually open links. If you want to open links, HTML has its own tag: a tag <a>. But considering your code, let’s try the following:

// Se você só quiser estilizar (duvido muito), CSS e HTML bastam, caso contrário, JS será necessário:

// Quando a página terminar de carregar...
window.onload = function(){
  // Crio uma variável pro nome da classe (pq n to afim de ficar escrevendo :v)
  var classe = 'content__container__list__item';
  // Encontro o primeiro elemento [0] pelo nome da classe
  var li = document.getElementsByClassName(classe)[0];
  
  // Ao clicar no elemento...
  li.onclick = function(){
    // Aqui vai oq você quer que o código faça
    // Eu só vou mudar a cor do fundo pra um ciano
    li.style.background = '#0FF';
  };
};

.content__container__list__item {
  color: black;     /* Cor padrão do texto: Preto */
  cursor: pointer;  /* O mouse vai virar aquela "mãozinha" que estamos acostumados pra botões */
  padding: 5px; /* Define a margem interna */
}


/* Quando o mouse estiver sobre o texto */

.content__container__list__item:hover {
  color: #666;    /* Cor do texto: cinza escuro */
  text-decoration: underline; /* Texto sublinhado */
}


/* Quando o usuário clicar no texto */
.content__container__list__item:active {
  color: #AAA;    /* Cor do texto: cinza claro */
  text-decoration: underline; /* Texto sublinhado */
}

<li class="content__container__list__item">Select a Language !</li>

In the case of the <a> tag I mentioned, you can simply do so:

/* Afeta direto o link */
.filha {
  color: black;           /* Cor: preto */
  text-decoration: none;  /* Tira o sublinhado */
  font-weight: bold;      /* Negrito só pra poder diferenciar */
}

/* Afeta todo link dentro de quem tiver a classe */
.pai a {
  color: black; /* Cor: preto */
  text-decoration: none;  /* Tira o sublinhado */
  font-weight: bold;      /* Negrito só pra poder diferenciar */
}

<ul>
<li>Por padrão, a tag &lt;a&gt; <a href="https://www.w3schools.com/">pega outra cor e fica sublinhado</a>,</li>
<li>mas você pode resolver isso no <a class="filha" href="https://www.w3schools.com/">CSS</a></li>
<li class="pai">dessas <a href="https://www.w3schools.com/">duas formas</a></li>
</ul>

I hope I have resolved your doubt. But next time, try to be a little more direct ;-)

Answer 2

.content__container__list__item:active {
  background: yellow;
}

Now, if what you need is to perform some action with the event click use Javascript:

function myFunction() {
    alert("My Function");
}

<li class="content__container__list__item" onclick="myFunction()">Select a Language !</li>