Dúvidas

1) Há algum site que encontro todos os pseudo-elementos existentes?

2) Porque criamos uma div com a classe conteudo-beneficios se poderiamos usar a classe beneficios da section inteira? Era só fazer algo como

.beneficio ul{ width: 40%; }

.beneficio iframe{ width: 60%; }

Estou perguntando mais para entender quando criar uma classe ou quando acessar pela classe maior chamando a tag que quero estilizar. Apesar de que a forma que dividiu achei mais semântica. Foi feito o mesmo com a lista, dando uma classe pra ela para não ter que usar a tag.

3) O professor disse que "a lista é um elemento inline, mas o item da lista é um elemento block". Porém onde definimos que a lista ul é inline e que os elementos seriam block? E porque você definir a ul como inline-block vai resolver o problema? Se ela já é inline como dito, ela ja deveria aceitar a imagem do lado dela certo? O inline-block so vai permitir que eu mexa no padding margin que antes não podia só com inline.

Tenho até uma explicação anotada aqui das aulas passadas sobre a diferença sobre inline, bloco e inline-block:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3) Você disse que "O inline-block interpreta tudo que colocarmos, inclusive o espaço vazio que está no html, então quando queremos usar ele, mas usar 100% da largura, esses elementos no html tem que ficar colados para que esse espaço nao reflita na exibição na nossa página". Poderia explicar melhor? Não entendi muito bem. Porque o css inline-block enxerga espaços no html? E como assim eu deixo o elemento grudado se quiser usar 100% da largura, não entendi essa parte. Eu também não interessante ficar grudando elementos no html, gosto de pular linhas, como evitar grudar elementos e ao mesmo tempo usar o inline-block?

4) Na classe itens você aumentou a altura da linha. Antes de falar dessa propriedade eu achei que íamos definir um margin pros itens. Ai fiquei na dúvida de usar o margin a altura da linha.

5) Sobre colocar o primeiro elemento da lista em negrito você disse que se criarmos uma classe vamos estar mexendo no html para algo que deveríamos mexer no css. Não entendi porque se criassemos uma classe faríamos o estilo no css e não no html. E fizemos isso o curso todo, de ver uma necessidade e criar uma classe.

6) Vi uma explicação aqui sobre a diferença entre pseudo-classes e pseudo-elementos, mas eu não entendi muito bem.

7) Com essa pseudo-classe nth-child(2n) tem como fazer outras contas? Eu sei que css não é uma linguagem de programação, mas tem como guardar valores nessa pseudo-classes para somar e tals.

Olá, Karolina.

2) O professor criou a div para separar o conteúdo de benefícios que envolve a lista-beneficios e a imagem-beneficios, ele quis definir esse pedaço como conteúdo, não somente para acessar pelas classes mas para definir uma divisão:

<div class="conteudo-beneficios">
                    <ul class="lista-beneficios">
                        <li class="itens">Atendimento aos Clientes</li>
                        <li class="itens">Espaço diferenciado</li>
                        <li class="itens">Localização</li>
                        <li class="itens">Profissionais Qualificados</li>
                        <li class="itens">Pontualidade</li>
                        <li class="itens">Limpeza</li>
                    </ul>
                    <img src="beneficios.jpg" class="imagem-beneficios">
</div>

4) Em relação a aumentar a altura linha que é o espaçamento entre uma linha do texto e outra é bem útil com textos grandes dentro de um <p></p> por exemplo porque o margin serve para separar elementos já o line-height: 1.5; serve para separar as linhas de um texto sem ser cada linha um elemento exemplo:

HTML:

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.

</p>

CSS:

p{
    `line-height: 1.5;`
}

Mesmo sendo um elemento só que é um <p> ele faz o espaçamento. Voltando para a lista da barbearia lá são elementos e pode usar o margin tranquilamente também.

5) Quando o professor fala em não mexer no HTML ele quis dizer resolver no css sem precisar criar classe para tudo, ou só para um elemento da lista. É para isso que serve os pseudo-elementos:

 .itens:first-child {
    font-weight: bold;
}

Essa é utilidade dele facilitar sem precisa criar a classe css.

7) :nth-child, Alguns exemplos:

Seleciona do primeiro até o quinto elemento:

.itens:nth-child(-n +5) {
    font-weight: bold;
}

Seleciona de três em três elementos:

.itens:nth-child(3n) {
    font-weight: bold;
}

Seleciona todos ímpares:

.itens:nth-child(odd) {
    font-weight: bold;
}

Seleciona todos pares:

.itens:nth-child(even) {
    font-weight: bold;
}

Espero ter ajudado!

Valeu Karolina.

PRORROGAMOS O DESCONTO!

HTML:

CSS: