propriedade: text-align não faz efeito

[codercss 14]

Olá,

Neste código: https://jsfiddle.net/oogxh5pw/1/

Como faço para colocar id #text-default com texto encostado do lado esquerdo?

Pelo que me apercebo este código não estão a fazer efeito:
#text-default li {
            text-align: left;
            list-style: none;
        }

Obrigado

[Latorre 2]

Pelo que vi esse seu código está entrando nessa condição:

ul:not(#text-right) li {
			text-align: center;
			text-transform: uppercase;
		}

[codercss 14]

Sim, mas pelas regras da prioridade do css (bolas, esqueci o termo técnico!) o elemento ul com id text-default devia passar por cima dessa condição?

#text-default li {
            text-align: left;
            list-style: none;
        }

Porque a propriedade list-style é aplicada nos elementos li do elemento ul. Mas a propriedade text-align não faz efeito. Porque?

[Latorre 2]

e se você adicionar o !important na sua regra, acho que ele vai obedecer.

#text-default li {
			text-align: left !important;
			list-style: none;
      
		}

[codercss 14]

Resultou: https://jsfiddle.net/oogxh5pw/3/

Mas o porque de ser preciso esta regra? Pela ordem do css, o que vem em último é que em prioridade. Salvo algumas exceções. Certo?

[Latorre 2]

Não entendo muito de front, mas acho que não precisava de colocar o li no ul:not(#text-right) li apenas até o #text-right já dava certo... Não me recordo qual é a ordem de relevância do css, nem sempre o que vem por ultimo é o que vale, tem uma regra por trás mas não lembro qual é.

[William Bruno 1501]

o ul:not.. ficou mais específico, e portanto teve prioridade. Não é apenas a ordem, mas sim a especificidade que influencia qual regra será aplicada. Ali você tem mais seletores, portanto mais especificidade.

[codercss 14]

o ul:not.. ficou mais específico, e portanto teve prioridade. Não é apenas a ordem, mas sim a especificidade que influencia qual regra será aplicada. Ali você tem mais seletores, portanto mais especificidade.

Percebi.

Mesmo este código:

#text-default li {
            text-align: left;
            list-style: none;
        }

ser bastante directo, para que ele tenha efeito tenho que adicionar mais pormenor. Porque senão este código:

ul:not(#text-right) li {
            text-align: center;
            text-transform: uppercase;
        }

prevalece!

Interessante. Reparem que neste código (https://jsfiddle.net/oogxh5pw/4/) consegui eliminar a aplicação da tag !important mas o que está no id text-default tem efeito uppercase. Mas neste código, com esta nova especificidade, consigo tornar as letras lowercase https://jsfiddle.net/oogxh5pw/5/

This is awesome! :)

O que aconselham para ler, para perceber mais sobre estes GRANDES pormenores?

Fiquei a saber esta funcionalidade, selectores filho, no grande site do maujor.

Obrigado

[Latorre 2]

o ul:not.. ficou mais específico, e portanto teve prioridade. Não é apenas a ordem, mas sim a especificidade que influencia qual regra será aplicada. Ali você tem mais seletores, portanto mais especificidade.

Poxa bacana, não sabia que era dessa forma que o css entendia as regras.