Are spaces necessary in CSS?-CodePudding

I was asked to take over a company's website built using a builder I'm not familiar with. I need to remove a few buttons, tabs, etc. (The site needs to be rebuilt.) Until we get the green light I'm having to remove items here and there with CSS.

I was able to remove the following button

<a href="#"  data-search="rental">"Rental"</a>

with the following:

a.search-btns[data-search=rental] {
display: none;}

But I trying to remove this tab

<li > <a href="#rental" data-tabtitle="Rental Equipment">Rental</a></li>

does not work using this method.

a.tab[data-tabtitle=Rental Equipment] {
display: none;}

I know just enough about CSS to be dangerous. Can someone help with this?

Thanks in advance!

CodePudding user response：

Change css code to:

li.tab a[data-tabtitle="Rental Equipment"] 
{
  display: none;
}

CodePudding user response：

In some CSS contexts, spaces are optional. For example, in a property declaration display:none; is the same as display: none;. However, as you can see in your selector scenario, they do matter.

a.tab[data...] is selecting for all links that have the class .tab and the data-attr you specified. For your scenario to work, you want something like: tab > [data...]

    .tab > [data-tabtitle="demo"]{
    display: none;

<ul>
<li ><a href="#" data-tabtitle="demo">hidden</a></li>
<li ><a href="#" data-tabtitle="notdemo">not hidden</a></li>
</ul>

I suggest checking out some documentation on CSS selectors to learn more.

https://www.w3schools.com/cssref/css_selectors.asp

CodePudding user response：

Try changing it to double quotes.

a.tab[data-tabtitle="Rental Equipment"]