How to select a span inside a span with CSS?

[Ibrahim_Yves]

Hi there,

Hope you’re well.
I’m actually having a problem with a very small portion of code:

<div class="showing_jobs">
  <span>
     Afficher tous les postes CDD, CDI & Freelance <span class="jobs-title-display">Jobs</span>
  </span>
</div>

In fact I’d like to hide the second span there, the one with class “jobs-title-display”.

I tried to add this in my CSS, but it didin’t work

.jobs-title-display .showing_jobs {visibility:hidden !important;}

.
Really hope that someone here will be abble to provide some help.

Kind regards.

[TechnoBear]

Have you tried

.jobs-title-display {display: none;}

Out of interest, is there a reason why the outer <span> is a <span> and not a <p>?

[Ibrahim_Yves]

@TechnoBear

.jobs-title-display {display: none;}

Thank you so much TechnoBear! You saved my day !

[TechnoBear]

Glad I could help.

Your original code couldn’t have worked, because you had the class names the wrong way round.

.jobs-title-display .showing_jobs {visibility:hidden !important;} targets something with a class of .showing_jobs which is a descendant of .jobs-title-display, but your HTML code was the other way round. (If you need a refresher, this article should help: http://www.sitepoint.com/web-foundations/css-selectors/).

I much prefer to keep things simple, if I can.