classe che non prende il container parent

[stardom]

Sto uscendo pazzo su questa pagina, dove vorrei che le due sezioni forum-stat-section e forums-categories-section abbiano la stessa larghezza, ovvero lo stesso CSS. Ma non si capisce perchè non prende né questo

.forum-stat-section, .forums-categories-section {background:white;border-radius:10px;}

nemmeno questo

.container .forum-stat-section  {background:white;border-radius:10px;}

[KillerWorm]

Ciao, se intendiamo "larghezza" come effettivo ingombro in px nella pagina, quei due elementi hanno rispettivamente delle larghezze differenti a prescindere dal colore del background che gli stai applicando.

L'elemento .forums-categories-section è infatti di per sé un .container, che risulta largo X e possiede un padding di 15px:

<section class="container forums-categories-section mt-30"> <!-- .container largo X con padding:15px a cui hai applicato background:white -->
  ...
</section>

Al contrario, l'elemento .forum-stat-section non è un .container ma piuttosto sta dentro un .container il quale ha background trasparente benché risulti sempre largo X e possieda un padding di 15px.

<div class="container mt-40">  <!-- .container largo X con padding:15px che di default ha background:transparent -->
    <div class="forum-stat-section rounded-lg bg-white p-20"> <!-- elemento a cui stai applicando background:white -->
        ...
    </div>
</div>

Va da sé che la larghezza effettiva di .forum-stat-section è sempre inferiore di 30px rispetto a .container.

Quello che puoi fare è applicare il background proprio al .container in cui sta .forum-stat-section.

Considera però alcune cose:
- questo .container non ha né id né altre classi che lo possano differenziare dagli altri .container dentro la pagina, per cui allo stato attuale risulta poco pratico selezionarlo attraverso il CSS.
- il suo contenuto (cioè l'elemento .forum-stat-section) ha già altre regole che possono dare fastidio sull'aspetto finale, ad esempio ha un'ombra.

Da ciò che ho capito non ti è possibile intervenire direttamente sul codice HTML, altrimenti si potrebbero facilmente applicare le classi disponibili per quel teamplate così da impostare background e bordi arrotondati.
Sarebbe potuta essere una cosa del genere:

<div class="container mt-40 rounded-sm bg-white">
   ...
</div>

Se invece puoi agire solo attraverso il CSS, allora si potrebbe risolvere con la famosa pseudo-classe :has() (già visto in una tua precedente discussione).
In tal caso non voglio postare la soluzione pronta ma ti invito a capire come puoi adoperarla per questa situazione.

Come anticipato, potresti infine voler togliere l'ombra dall'elemento contenuto. Ti basterà sovrascrivere la proprietà box-shadow applicando il valore none.

Fai qualche prova e fai sapere se riesci

[stardom]

ciao, sì, se avessi avuto accesso al template avrei messo quella prima sezione direttamente nel container della seconda. Ma posso solo agire con CSS. Ho tentato

head:has(meta[content^="Forums"]) + .container .forums-stat-section {background:white;border-radius:10px;}

ma invano. Avevo pensato di mettere dei padding negativi al secondo container, ma non mi pare che sia possibile.
Piuttosto, essendoci appunto l'ombra, l'idea potrebbe essere di cambiarla in

box-shadow: 0 0 0 15px #FFF;

che infatti funziona (nonostante un percettibile bordino). Mi pare la cosa più logica data la situazione.

[KillerWorm]

head:has(meta[content^="Forums"]) + .container .forums-stat-section {background:white;border-radius:10px;}

Ti direi che in questo caso non ha molto senso specificare head, meta, ecc... cosa che ti serviva invece nel caso dell'altra discussione per "identificare" l'elemento in base al tipo di pagina, la quale poteva essere rilevata usando :has() in quel modo.

Cerca però di capire bene come funziona la pseudo-classe :has() e come puoi usarla in questo specifico caso.

In questo caso potresti infatti usarla direttamente su .container per capire quando tale elemento HA un determinato contenuto così da poter definire la regola che sarà applicata proprio su quello stesso .container.

Ti invito a consultare qualche relativa documentazione online su tale pseudo-classe. Fai sapere, eventualmente, se trovi difficoltà nel capire come funziona e come può essere applicata; nel caso posso cercare di darti qualche ulteriore dritta per chiarire.

Piuttosto, essendoci appunto l'ombra, l'idea potrebbe essere di cambiarla in

Non ti basta invece applicarci semplicemente none per annullare l'effetto?

Fai sapere

[stardom]

Non ti basta invece applicarci semplicemente none per annullare l'effetto?

beh, sono intervenuto sulla box-shadow proprio perchè non riuscivo a lavorare sulla :has()
In realtà non riesco proprio a capire poichè, come dicevi, questo elemento .forum-stat-section non è un .container ma piuttosto sta dentro un .container. Se non riesco a modificare via inspector, certo non posso capire come si applica la :has()

[KillerWorm]

edit

[KillerWorm]

questo elemento .forum-stat-section non è un .container ma piuttosto sta dentro un .container

Esatto, il fatto è che dovresti modificare proprio quel .container, in cui è appunto contenuto quell'elemento.

Però mi farebbe piacere se ci si arrivasse ragionando. Cosa dice la documentazione riguardo :has()?

[stardom]

Quel container mi si modifica soltanto se tolgo il paddingright/left 15px dal container principale, è come se fosse un container figlio.
La documentazione che trovo sul web in merito a :has() è più o meno la stessa, ovvero si limita a considerarla come qualsiasi altra pseudo classe, ma poi dà per scontato che uno si orienti da solo. Quindi non saprei adattarla al mio caso... a meno che tu non abbia una documentazione più specifica (anche qui su html.it ho trovato poco).

[KillerWorm]

Ok, ma nello specifico come funziona?

Qui una guida in italiano con vari esempi di utilizzo:
https://www.progweb.it/css-selettore-has-esempi

In sostanza è possibile usarla per selezionare un elemento contenitore o un elemento fratello, relativamente agli elementi rilevati attraverso il selettore passato come argomento della funzione.

contenitore:has(discendente) /* seleziona "contenitore" solo quando al suo interno è presente "discendente" */

fratello1:has(+fratello2) /* seleziona "fratello1" solo quando di seguito è presente "fratello2" */

In questo caso è necessario selezionare .container solo quando al suo interno è presente .forum-stat-section

Infatti dovrai applicare il background proprio a quel .container, il quale risulta appunto largo come l'altro elemento .forums-categories-section (che tra l'altro è anch'esso un .container); così da ottenere dei box che abbiano visivamente la stessa larghezza.

Per fare questo puoi quindi usare :has(). E' abbastanza semplice, basta un minimo di logica secondo quanto indicato.

Una volta che definisci questa regola per il background, puoi impostarne un'altra in cui selezioni esattamente .forum-stat-section per rimuoverne l'ombra che gli è stata applicata. Per rimuovere l'ombra basta applicare none a box-shadow.

Spero di aver chiarito qualcosa. Di più non posso/voglio aiutarti, (senza offesa) non mi sembra bene dare sempre la minestra pronta

[stardom]

no minestre pronte ci sto arrivando, anzi mi pare proprio di aver risolto (grazie al tuo tutorial) con il seguente:

.container:has(.forum-stat-section) {background:white;}

ed eliminando la box-shadow. Non mi pare ci sia nulla di errato