Hide a word within a class with just CSS - html

Question

A WordPresss site, where I'm attempting to hide the word 'SKU' as seen below in the html code.
Here is the html
<div class="card-body card-body">
<h3>Phase 1 Phonics Planning Week 1 Example TEST FREE</h3>
<p><small><strong>SKU:</strong> </small></p>
<p>
</p></div>
I want to use a just CSS to hide the SKU word, my effort thus far, but I'm unable to see how to target just SKU, I presume I need to use the element some how?:
CSS
.card .card-body {
display: none;
}

Answer 1

Unless im misunderstanding your question, you can just use:
.card-body p small strong {display:none}
If this isn't what you require please elaborate.

Answer 2

There are a couple of ways. One is to use
.card-body small {
display: none;
}
But, it would probably be better to create a new class just for hidden things, like this
.hide-sku {
display: none;
}
and in the html
<span class='hide-sku'>SKU:</span>
(also, you have the class card-body duplicated -- not sure if that's your intention)

Answer 3

If you can control classes in your html code - the easiest way is to add some helper class:
.hidden {
display: none;
}
<div class="card-body">
<h3>
Phase 1 Phonics Planning Week 1 Example TEST FREE
</h3>
<p class="hidden">
<small>
<strong>SKU:</strong>
</small>
</p>
<p>Some other content</p>
</div>
If you can't control classes and change html code - you can use :nth-of-type or :nth-child pseudoclasses:
.card-body p:nth-of-type(1) {
display: none;
}
<div class="card-body">
<h3>
Phase 1 Phonics Planning Week 1 Example TEST FREE
</h3>
<p>
<small>
<strong>SKU:</strong>
</small>
</p>
<p>Some other content</p>
</div>