SCCS

Nou ik met Bootstrap bezig ben moet ik ook weer bijleren over css, scss eigenlijk. Ik liep nogal achter want ik wist niet dat je kon nesten. Ik gebruik het volgende (geleerd van AI):
// ==========================================
// DEEL 1: BIOGRAFIE IN DE KOPTEKST (HEADER)
// ==========================================
.view-id-schrijversblok .view-header {
 // We gebruiken de officiele variabelen uit de kern van Bootstrap 5
 background-color: $card-bg;           
 border: $card-border-width solid $card-border-color; 
 border-radius: $card-border-radius;   
 padding: $card-spacer-y $card-spacer-x; 
 margin-bottom: map-get($spacers, 4);
 box-shadow: $box-shadow-sm;          

 // De alinea-regels binnen de biografie
 p {
   margin-bottom: map-get($spacers, 1);
   color: $card-color; 
   font-size: 0.95rem;

   // Selecteer specifiek de allereerste regel (de schrijversnaam-verpakking)
   &:first-child {
     font-size: 1rem; 
     color: #6c757d; 
     margin-bottom: map-get($spacers, 2);

     // DE CORRECTIE: Een schone, geneste 'a' zonder & dwingt de naam groot te worden
     a {
       font-size: $h2-font-size !important; 
       font-weight: $headings-font-weight !important; 
       color: $headings-color !important; 
       text-decoration: none;
       display: inline-block;
       margin-left: map-get($spacers, 1);

       &:hover {
         color: $pjella-accentkleur !important;
       }
     } // Einde a
   } // Einde :first-child
 } // Einde p

 // De algemene links onderaan de biografie (zoals de Wikipedia-link)
 a {
   color: $text-muted;
   text-decoration: underline;
   font-size: 0.9rem;

   &:hover {
     color: $pjella-accentkleur;
   }
 } // Einde a
}
 

In de SASS-taal betekent het ampersand-teken (&) letterlijk: "Plak de vorige naam hier direct aan vast". Omdat de vorige map :first-child was, leest de compiler dit nu als :first-child:a [index.js]. Omdat die HTML-combinatie niet bestaat in de browser, negeert de computer de complete styling voor de naam-link, waardoor deze plotseling klein en onbewerkt op je scherm achterblijft [index.js].

Als je een dieper liggend HTML-element (zoals een link a) wilt aanspreken binnen een map, gebruik je geen &, maar typ je simpelweg een losse a