1

Mesmo utilizando a função body_class() que retorna o nome da pagina ou o id da mesma ao aplicar uma determinada regra em css alguns elementos em outras paginas sofrem mudanças, por exemplo:

Home:

<body <?= body_class(); ?>> <!-- retorna uma string "home" -->
    <div class="hero">
        <h1 class="title">Titulo</h1>
    </div>
...

Pagina de contato:

<body <?= body_class(); ?>> <!-- retorna uma string "page-id-5" -->
    <div class="hero">
        <h1 class="title">Titulo</h1>
    </div>
...

Ao utilizar o css eu tento sempre utilizar a primeira classe que esta em body, ou seja:

.page-id-5 .hero .hero-body .title {
    color: white;
}

Porém mesmo assim essa regra esta sendo aplicada na pagina home, qual é a melhor maneira de separar os css's entre paginas no wordpress?

inserir a descrição da imagem aqui

8
  • Com esses dados que você postou não vai dar pra reproduzir o problema. Deve ser algo específico do seu código. Tente reproduzir num exemplo simples e atualize a pergunta.
    – bfavaretto
    Commented 3/07/2017 às 14:21
  • porque você acha que não pra pra reproduzir? este é exatamente o problema que estou enfrentando, o title que esta dentro da "arvore" de .page-id-5 esta se aplicando em lugares onde não estao na hierarquia do css (iniciando com .page-id-5)
    – RFL
    Commented 3/07/2017 às 14:48
  • Porque se não tem uma classe page-id-5 acima de .hero .title não tem como o CSS aplicar o seletor .page-id-5 .hero .title.
    – bfavaretto
    Commented 3/07/2017 às 15:04
  • @bfavaretto coloquei um print para você ver.
    – RFL
    Commented 3/07/2017 às 15:27
  • Olhe o seletor da imagem que você postou, é diferente do que você descreveu na pergunta.
    – bfavaretto
    Commented 3/07/2017 às 15:36

1 Resposta 1

2

O problema que está acontecendo conforme o @bfavaretto já informou é que na sua folha de estilo contato.css na linha 7 está assim:

.page-id-5 .hero .hero-body, .title {
    color: white;
}

O correto seria assim:

Sem a vírgula depois de .hero-body

.page-id-5 .hero .hero-body .title {
    color: white;
}

UPDATE

Caso queira deixar todo o texto dentro de hero-body com a cor branca incluindo os títulos o css correto deve ser da seguinte forma:

.page-id-5 .hero .hero-body, .page-id-5 .hero .hero-body .title {
    color: white;
}

Desta forma você está definindo o css para aplicar a cor branca em todo os texto que estiver dentro de hero-body e também em todos os texto que tem a classe title.

A classe title por padrão receberia a cor branca por herança de hero-body. Mas provavelmente seu tema tem a classe title atribuindo outra cor a ela, então com este css .page-id-5 .hero .hero-body .title você defini que toda classe title que estiver dentro da classe hero-body irá receber a cor branca.

A vírgula é usada para iniciar outra classe css que irá ter o estilo que você vai definir em comum.

2
  • O que eu pretendo é deixar todo o texto dentro de hero-body com a cor branca incluindo os titulos, quando utilizo a virgula ao que eu entendo deveria funciona com os seletores utilizados anterioemente para abranger todo o hero-body e o titulo e não que o titulo é "excluido"
    – RFL
    Commented 3/07/2017 às 16:07
  • @Rafael Acioly eu acabei de atualizar minha resposta te dando uma melhor explicação. Veja por favor.
    – Wendell
    Commented 3/07/2017 às 16:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .