CODEWITHSUNDEEP
htmlcss
amyw
amyw

Reputation: 1

how to use CSS to hide a header contains specific text

I want to hide a header text from the website.

because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.

I have tried it. The result is that it will remove other page's header too.

is there a way to apply CSS so that it only hides when the header text contains specific words?

i will be appreciate for any help i may get here

Upvotes: 0

Views: 3550

Answers (4)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13546

There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.

Upvotes: 1

Wouter Vandevelde
Wouter Vandevelde

Reputation: 904

If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.

<header style="display: none;"></header>

Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.

Upvotes: 1

DeathJack
DeathJack

Reputation: 615

You need to just add a id to your specific header and apply style to it. CSS 101.

<head>
  <style> //Internal CSS 
       #hide {
       display: none;
       }
  </style>
</head>
<body>
      <h2 id="hide"> Hello World </h2>
      <h2> ... </h2>
      <h2> ... </h2>
</body>

If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.

The last and least used method is to use inline CSS :

<h2 style="display: none"> ... </h2>

More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display

If you want to use the same style in more than one place use 'class' instead of id.

    <head>
      <style> //Internal CSS 
           .hide {
           display: none;
           }
      </style>
    </head>
    <body>
          <h2 class="hide"> Hello World </h2>
          <h2> ... </h2>
          <h2 class="hide"> Lorem Ipsum </h2>
    </body>

Upvotes: 0

phpmeh
phpmeh

Reputation: 1792

In your H2 tag that you want to hide, you can apply a class.

<html>
<head>
   <style>
      .hide-me { display: none; }
   </style>
</head>
<body>
    <h2>First header</h2>
    <h2 class="hide-me">Your header</h2>
</body>
</html>

It's better to move the tag into a CSS file, but this will accomplish what you want.

Upvotes: 0

Related Questions