CODEWITHSUNDEEP
htmlcss
Dano007
Dano007

Reputation: 1932

Hide a word within a class with just CSS

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><a href="https://www.staging4.XXXX/shop/resources/phase-1-phonics-planning-week-1-example-test-free/">Phase 1 Phonics Planning Week 1 Example TEST FREE</a></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;
}

Upvotes: 1

Views: 2615

Answers (3)

fen1x
fen1x

Reputation: 5880

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>
    <a href="#">Phase 1 Phonics Planning Week 1 Example TEST FREE</a>
  </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>
    <a href="#">Phase 1 Phonics Planning Week 1 Example TEST FREE</a>
  </h3>
  <p>
    <small>
      <strong>SKU:</strong> 
    </small>
  </p>
  <p>Some other content</p>
</div>

Upvotes: 1

mankowitz
mankowitz

Reputation: 2051

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)

Upvotes: 2

Alex
Alex

Reputation: 9041

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.

Upvotes: 7

Related Questions