1

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="#" class="search-btns" data-search="rental">"Rental"</a>

with the following:

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

But I trying to remove this tab

<li class="tab"> <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!

Tim Hill
  • 23
  • 2
  • CSS uses double-quotes to allow arbitrary text in attribute selectors (with an optional trailing `i` for case-insensitive mode), so use `li.tab > a[data-tabtitle="Rental Equipment"i]` (the `i` is for case-insensitive matching. – Dai Sep 26 '22 at 22:12
  • 1
    Does this answer your question? [Javascript selector for element with attribute with spaces](https://stackoverflow.com/questions/66771892/javascript-selector-for-element-with-attribute-with-spaces) – Heretic Monkey Sep 26 '22 at 22:17
  • You want to be using `li.tab>a[...` because your current syntax (a.tab) doesn't focus on the element you are exampling – Martin Sep 26 '22 at 23:01

3 Answers3

1

Change css code to:

li.tab a[data-tabtitle="Rental Equipment"] 
{
  display: none;
}
Rambodsm
  • 127
  • 6
0

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 class="tab"><a href="#" data-tabtitle="demo">hidden</a></li>
<li class="tab"><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

loomy
  • 361
  • 1
  • 5
  • Considering how little we know of the user's DOM structure, suggesting the use of just the presence of the attribute, rather than its value (which is what the OP is asking about), is on shaky ground. – Heretic Monkey Sep 26 '22 at 22:20
  • Fixed the issue w the specification as per @HereticMonkey's comment. – loomy Sep 26 '22 at 22:21
  • Thanks! I definitely need to read up on this. – Tim Hill Sep 26 '22 at 22:28
-1

Try changing it to double quotes.

a.tab[data-tabtitle="Rental Equipment"]
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Emily Chang
  • 1
  • 2