How can I hide a css element with a specific title?
I want to hide this element input
. Actually, I have few of them and I have to use their names.
<input type="image" alt="Storage Administration" src="App_Themes/Default/topmenu$store$png$ffffff$000000.IconHandler.axd" title="Storage Administration" id="ctl00_ctl00_TopMenuCph_btnAdm" name="ctl00$ctl00$TopMenuCph$btnAdm">
Can anyone suggest how to use the full title or alt?
[title ~= "Storage"] {
display: none;
}
This works well, but it doesn't work in firefox and chrome.
[title ~= "Storage Administration"] {
display: none;
}
If I can't use the full header, then how can I narrow down the selection if the input element is inside .topMenu > div > li
?
<ul class="topMenu">
<div id="ctl00_ctl00_TopMenuCph_panTab">
<li><input type="image" alt="Storage Administration" src="App_Themes/Default/topmenu$store$png$ffffff$000000.IconHandler.axd" title="Storage Administration" id="ctl00_ctl00_TopMenuCph_btnAdm" name="ctl00$ctl00$TopMenuCph$btnAdm"></li>
<li><input type="image" alt="Envelope Templates" src="App_Themes/Default/topmenu$envelope$png$ffffff$000000.IconHandler.axd" title="Envelope Templates" id="ctl00_ctl00_TopMenuCph_btnEnv" name="ctl00$ctl00$TopMenuCph$btnEnv"></li>
<li><input type="image" alt="My Documents" src="App_Themes/Default/topmenu$mydocuments$png$ffffff$000000.IconHandler.axd" title="My Documents" id="ctl00_ctl00_TopMenuCph_btnMyD" name="ctl00$ctl00$TopMenuCph$btnMyD"></li>
</div>
</ul>
source to share
The attribute selector you are using does not work the way you expect it to work. When you place [title~="Storage Administration"]
, CSS looks for elements that have a heading exactly "Storage" or "Administration". CSS will match nothing.
Take a look at the attribute selector specifier for a more detailed description:
http://www.w3.org/TR/CSS21/selector.html#attribute-selectors
If you want to look specifically at items with "Repository Administration" as their title attribute, use [title="Storage Administration"]
. Note that the ~
(tilde) is removed from the equation.
There are several additional attribute selectors in CSS3 such as substring *=
(see the CSS3 Selectors Specification ). Other people try these things in fooobar.com/questions/48796 / ... .
Here is an example of using their logic. Don't know if this works for you, but play with these other options. Be sure to check the browser compatibility as I'm not sure what kind of support exists for these yet.
[title^='Storage'], [title*=' Storage']{
display: none;
}
source to share