Nie działa dziedziczenie w css

Hej,

Nie mogę sobie poradzić z poniższym problemem, mam taki kawałek kodu:

<div id="col-1094617311" class="col medium-3 small-6 large-3">
		<div class="col-inner text-center">			
                    <a class="button primary is-underline">
                                   <span>Click me!</span>
                   </a>
		</div>
</div>

Chcę zmienić coś w "a class", jak zapisuje to w ten sposób to działa (custom css w szablonie):

div.col.medium-3.small-6.large-3 div.col-inner.text-center a.button.primary.is-underline{text-align: center;}

Jednak zależy mi by zastosować ten indentyfikator z pierwszego div, żeby potem na stronie mi coś się nie porobiło, próbowałem to zapisać na różne sposoby, np:

div#col-1202221609.col.medium-3.small-6.large-3 div.col-inner.text-center a.button.primary.is-underline{text-align: center;}

Ale to nie działa wtedy. Nie umiem zrobić tego zapisu jak mam klasę i indentyfikator w jednym div, jak to zapisać ? Przegladałem różne poradniki ale nie wychodzi w żaden sposób

Pozdrawiam

A po co Ci jednoczesnie po id i klasie wskazywac skoro id jest jednoznaczne?

stivens napisał(a):

A po co Ci jednoczesnie po id i klasie wskazywac skoro id jest jednoznaczne?

Stylowanie powinno być po klasach, a nie po ID.

Co do problemu: proponuję przemyśleć to jeszcze raz, bo teraz to straszny burdel. Zamiast tworzyć całe drzewko z X klasami dziedziczącymi po sobie, to po prostu dodaj do linku nowa klasę text-center i to do niej napisz style.

EDIT: Ten span wewnątrz a jest niepotrzebny.

serek napisał(a):

Stylowanie powinno być po klasach, a nie po ID.

Swoją drogą: któryś raz spotykam się z tą opinią i nie bardzo wiem, jakie może mieć uzasadnienie.
Jeżeli w dokumencie mam jakieś unikalne elementy z własnymi ID-ami, które chcę ostylować w unikalny dla tych elementów sposób, to po co zaciemniać kod i dodawać im jeszcze jakieś klasy nazwane tak samo jak ID-y?

#col-1094617311 > DIV > A.button.primary.is-underline {text-align:center;}

nie bardzo wiem, jakie może mieć uzasadnienie.
Jeżeli w dokumencie mam jakieś unikalne elementy z własnymi ID-ami, które chcę ostylować w unikalny dla tych elementów sposób,

@Freja Draco: moim zdaniem chodzi o rozdział warstwy prezentacji (klasy, które odpowiadają za stylowanie) od warstwy logiki, która korzysta z ID do określania specyficznych zachowań typu onClick, grzebania w drzewie DOM itp.

Ale obiekty do przypisywania zdarzeń też mogę łapać po klasach. Używając document.querySelector mogę pisać nawet całe złożone selektory, nie używając żadnych idów. Ogólnie powyższe średnio mnie przekonuje.

Freja Draco napisał(a):

Ale obiekty do przypisywania zdarzeń też mogę łapać po klasach. Używając document.querySelector mogę pisać nawet całe złożone selektory, nie używając żadnych idów. Ogólnie powyższe średnio mnie przekonuje.

Ale wtedy sie musisz iterowac albo robic [0] bo to kolekcje zwraca

stivens napisał(a):

Freja Draco napisał(a):

Ale obiekty do przypisywania zdarzeń też mogę łapać po klasach. Używając document.querySelector mogę pisać nawet całe złożone selektory, nie używając żadnych idów. Ogólnie powyższe średnio mnie przekonuje.

Ale wtedy sie musisz iterowac albo robic [0] bo to kolekcje zwraca

Kolekcje zwraca document.querySelectorAll.

div#col-1202221609.col.medium-3.small-6.large-3 div.col-inner.text-center a.button.primary.is-underline{text-align: center;}

Niezły potworek, chyba nie można być bardziej konkretnym. Skoro masz już ID to zakrawa już o jakąś fobię żeby tak doprecyzować o który element nam chodzi. Już chyba style inline są bardziej w porządku niż to

a może problemem jest że w kodzie masz id col-1094617311 a stylujesz col-1202221609 ?

@Freja Draco Id powinno być unikalne na stronie. Arkusze styli powinny określać ich klasy - jak opcje formatowania w wordzie do wyboru - tak żeby dowolnemu elementowi można było nadać łatwo pożądany wygląd. Jeżeli użyjemy ID a potem będziemy chcieli mieć kolejny element o identycznym wyglądzie to nie możemy tego zrobić bez edytowania styli. To coś jak używanie singletonów - wszystko ok dopóki się nie okaże że jednak ten nasz element nie jest taki wyjątkowy i chcemy takie dwa. Właściwie perfekcyjnie by było najpierw utworzyć css z możliwymi elementami których będziemy używać a potem ich tylko używać na kolejnych stronach nie tykając już plików .css. W praktyce jednak częściej się spotyka totalnie nieprzemyślane arkusze styli i każda nowa podstrona = edycja styli

serek napisał(a):

stivens napisał(a):

A po co Ci jednoczesnie po id i klasie wskazywac skoro id jest jednoznaczne?

Stylowanie powinno być po klasach, a nie po ID.

Co do problemu: proponuję przemyśleć to jeszcze raz, bo teraz to straszny burdel. Zamiast tworzyć całe drzewko z X klasami dziedziczącymi po sobie, to po prostu dodaj do linku nowa klasę text-center i to do niej napisz style.

EDIT: Ten span wewnątrz a jest niepotrzebny.

Jak wykorzystywałem sam fragment z id to nie działało to

Dlatego też właśnie pisałem dokładną ścieżkę od id do końca, wszystko po sobie bo inaczej nie działało :) Tylko jak jest id i klasa w jednym div to w ogóle nie działa tym moim sposobem co robiłem

Nie mogę za bardzo dodać do linku żadnej nowej klasy, bo ten cały kod generuje wordpress, a to nie są jakieś bloki czy coś żeby tam była opcja by dodać swoją własną klasę. Dostaje taki kod jaki wordpress tworzy, i mam w ustawieniach szablonu tylko "custom css" i tam jedynie moge coś wpisać.

a może problemem jest że w kodzie masz id col-1094617311 a stylujesz col-1202221609 ?

Tam jest wiele kolumn różnych , ale może faktycznie się pomyliłem, sprawdzę to też, bo wydaje mi się że to poniżej będzie działać :

#col-1094617311 > DIV > A.button.primary.is-underline {text-align:center;}

Dziękuję za wszystkie odpowiedzi, mam nadzieję że już sobie poradzę

Pozdrawiam