Visão geral

Este artigo explica como você pode destacar adequadamente partes específicas do seu web app detectando e selecionando o elemento certo usando seletores CSS.

Observação: Você também pode conferir nosso tutorial em vídeo sobre como usar a opção Seletor CSS personalizado para selecionar o elemento HTML desejado.

Detectando elementos e conectando-os aos componentes da UserGuiding

Para encontrar os elementos HTML e seus seletores CSS, basta clicar com o botão direito do mouse na página da plataforma e inspecionar o elemento desejado no console do navegador.

Em seguida, você pode inserir os seletores CSS ativando a opção CSS Selector nas configurações da extensão do Chrome do seu componente de Guia (Tooltip ou Input) ou do seu Hotspot.

Exemplo

• Clique com o botão direito do mouse e inspecione seu elemento
• Selecione um nome de classe ou um ID de seu elemento
• Copie o seletor CSS desejado (neste exemplo, selecionamos um ID) e cole-o adicionando # antes dele
• "book-book" é o ID que usaremos como seletor CSS

Observações importantes

• Aconselhamos o uso das IDs, pois elas são mais específicas do que as classes encontradas em vários elementos HTML.
• Se você quiser usar o nome da classe de um elemento, precisará colocar um ponto (.) antes do nome do seletor CSS; se quiser usar um ID, precisará colocar uma hashtag (#).
• Para mais detalhes e exemplos sobre Seletores CSS, você pode conferir esta página.