jak wybrać drugiego diva i nadać mu właściwości? potrzebuję przypomnienia

Question

W jaki sposób moge wybrać drugiego diva o nazwie tekst  i zmienić tylko dla niego np font size?  dawno nie pisałem kodu i dużo zapomniałem...

 <div class="main"> 

      <div class="tekst">
          ABCDFGH
      
      </div>
    </div>



       <div class="main"> 

      <div class="tekst">
          ABCDFGH
      
      </div>
    </div>

 

Answer 1

Przy aktualnej strukturze HTML możesz użyć selektora .main:nth-of-type(2) .tekst. Czytelniej jednak było by dodać konkretnemu elementowi osobną klasę i ją ostylować.

Answer 2

@ScriptyChris podał chyba najlepsze rozwiązania.  

Czytelniej jednak było by dodać konkretnemu elementowi osobną klasę i ją ostylować.

Jeżeli masz ulubione połączenie np. ciemne tło diva z jasno zielonym kolorem fontu to najlepiej stworzyć dla takiego połączenia osobną klasę i dodawać do elementów które chcesz w ten sposób modyfikować.

Przykład:

.kontrastowy-div {
background: #222;
font-weight: bold;
color: #00ff00;
}

Jeden div może posiadać wyłącznie jedne "id", natomiast może posiadać wiele różnych "class", dzięki czemu różnie wystylizowane divy na stronie mogą posiadać wspólny mianownik. Pomoże Ci to zachować porządek w kodzie.

Powodzenia w powrocie do kodowania :)

Comments

jak masz 40 kontenerów każdemu będziezs nadawał klase? A co jeśli chcesz ostylować tylko 1 element, z całej kolekcji elementów tej samej klasy :) bez niepotrzebnej ingerencji w kod HTML.

---

jak masz 40 kontenerów każdemu będziezs nadawał klase?

To zależy, jeżeli modyfikujemy wszystkie kontenery jednakowo to najlepiej znaleźć jedną wspólną dla wszystkich klasę i ją zmodyfikować w arkuszu stylów. Gdy jednak wśród nich chcesz zmodyfikować odrobinę tylko kilka ale w ten sam sposób to myślę, że najlepiej stworzyć nową klasę i dodać ją do wybranych kontenerów.

A co jeśli chcesz ostylować tylko 1 element, z całej kolekcji elementów tej samej klasy :)

Wtedy dodam do niego jeszcze jedną klasę którą opiszę jak mi się podoba lub użyję atrybutu "style", jeżeli to tylko drobna modyfikacja jednego diva na stronie np.

<div class="klasa1 klasa2 klasa3" style="background: #222;">Wnętrze diva</div>

Przy projektach często korzystam z Bootstrap i nawet do takich drobnostek jak color używam gotowych klas np. class="bg-dark text-light" - i już masz ciemny div z białym tekstem. Uważam, że to dużo bardziej czytelne rozwiązanie.

W praktyce oznacza to znacznie mniej kodu w twoim arkuszu stylów przy niewielkiej ilości dodatkowego kodu w dokumencie HTML. Uważam, że to dobra praktyka, natomiast rozumiem że każdy ma swój styl pracy.

bez niepotrzebnej ingerencji w kod HTML.

Czasem lepiej odrobinę zmodyfikować dokument HTML niż robić bałagan w dokumencie CSS. Wyjątkiem może być modyfikacja w systemach do zarządzania treścią jak np. WordPress, wtedy rzeczywiście dużo łatwiej i szybciej zmodyfikować taki element w dodatkowym CSS dostępnym w panelu admina niż specjalnie logować się do konta FTP i grzebać w plikach, szczególnie jeżeli nie znamy przynajmniej odrobinę PHP.

P.S.

Naprawdę fajne forum i super pomocna społeczność, cieszę się, że tu trafiłem.