hello i'm using css counter to display the number of div that have a specific class inside a section but i don't know why the result of my code is alwase 0 this the code
<section id="commandes" class="vc_section">
<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element titre_f">
<div class="wpb_wrapper">
<p>Commandes</p>
</div>
</div>
<div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
<h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
<span class="qodef-accordion-mark">
<span class="qodef_icon_plus icon_plus"></span>
<span class="qodef_icon_minus icon_minus-06"></span>
</span>
<span class="qodef-tab-title">Y a t’il des minimas de commande?</span>
</h5>
<div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="qodef-accordion-content-inner">
<div class="wpb_text_column wpb_content_element texte-ac">
<div class="wpb_wrapper">
<p>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
</div>
</div>
</div>
</div>
</div>
<div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
<h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
<span class="qodef-accordion-mark">
<span class="qodef_icon_plus icon_plus"></span>
<span class="qodef_icon_minus icon_minus-06"></span>
</span>
<span class="qodef-tab-title">Est-il possible de commander des quantités inférieures aux quantités minimum indiquées sur le site?</span>
</h5>
<div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="qodef-accordion-content-inner">
<div class="wpb_text_column wpb_content_element texte-ac">
<div class="wpb_wrapper">
<p>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
and this is the html to display the number :
<div id="resultat"></div>
this is the css :
#commandes{counter-reset:commandes;}
#commandes > .qodef-accordion-content {counter-increment:commandes;}
#resultat::after {content:counter(commandes);}
the result of this is : 0
There are two problems which are causing the counter not to be incremented.
The first is that the CSS:
#commandes > .qodef-accordion-content {counter-increment:commandes;}
is selecting only the direct children of #commandes - none of which have .qodef-accordion-content as a class.
You need to use the general selector (a space) not this specific child selector (a >).
The second is that those elements which do have the required class are set to display: none; They are not rendered and so the counter never gets incremented.
See MDN
none Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist)
UPDATE: This snippet counts the number of .qodef-accordion-holder:
#commandes{counter-reset:commandes;}
#commandes .qodef-accordion-holder {counter-increment:commandes;}
#resultat::after {content:counter(commandes);}<section id="commandes" class="vc_section">
<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element titre_f">
<div class="wpb_wrapper">
<p>Commandes</p>
</div>
</div>
<div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
<h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
<span class="qodef-accordion-mark">
<span class="qodef_icon_plus icon_plus"></span>
<span class="qodef_icon_minus icon_minus-06"></span>
</span>
<span class="qodef-tab-title">Y a t’il des minimas de commande?</span>
</h5>
<div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="qodef-accordion-content-inner">
<div class="wpb_text_column wpb_content_element texte-ac">
<div class="wpb_wrapper">
<p>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
</div>
</div>
</div>
</div>
</div>
<div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
<h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
<span class="qodef-accordion-mark">
<span class="qodef_icon_plus icon_plus"></span>
<span class="qodef_icon_minus icon_minus-06"></span>
</span>
<span class="qodef-tab-title">Est-il possible de commander des quantités inférieures aux quantités minimum indiquées sur le site?</span>
</h5>
<div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="qodef-accordion-content-inner">
<div class="wpb_text_column wpb_content_element texte-ac">
<div class="wpb_wrapper">
<p>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
and this is the html to display the number :
<div id="resultat"></div>