Tips on concealing an element using CSS based on its specific title

I have a specific input element that I need to hide, along with a few others. Is there a way to do this using 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">

Any suggestions on how to hide the input based on its full title or alt text?

[title ~= "Storage"] { 
    display: none; 
} 

This solution is effective but not supported in Firefox and Chrome.

[title ~= "Storage Administration"] { 
    display: none; 
}

If I can't use the full title, is there a way to target the input element within .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>

Answer №1

Your current use of the attribute selector may not be producing the results you desire. Instead of finding elements with a title containing "Storage Administration," CSS is looking for titles that are exactly "Storage" or "Administration," resulting in no matches.

For a more detailed explanation, refer to the attribute selector specification:

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

If you specifically want to target elements with a title of "Storage Administration," adjust your selector to [title="Storage Administration"]. Remove the tilde (~) from the selector.

In CSS3, there are additional attribute selectors like substring matching with *= (see: CSS3 selectors spec). Similar approaches are explored in another StackOverflow answer.

You can experiment with alternative options based on their suggestions. Keep in mind browser compatibility when testing these techniques as support levels may vary.

[title^='Storage'], [title*=' Storage']{
    display: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to use jQuery to attach functions to every input element?

Imagine you have a set of HTML markup and CSS like this: #CSS .inputhelp_text { background: #000; color: #fff; } .nodisplay { display: none; } <input class="inputhelp" id="firstname" /><span class="inputhelp_text nodisplay" id="help_firstname"& ...

Combining Bootstrap and @material-ui for a better UI experience!

Is there a way to apply Bootstrap classes to @material-ui components? For example, I am attempting to create a button and style it using both 'btn' and 'btn-primary' from Bootstrap. import { makeStyles } from "@material-ui/core&quo ...

What are your thoughts on CSS alignment?

Having difficulty aligning unordered lists the way I want. Below is an image of my desired layout, looking for guidance on achieving the version on the right side. I will be using between 1 and 6 unordered lists on different pages, so a universal solution ...

What is the best way to incorporate custom styles in CKEditor with the help of the Custom drop

I recently implemented a plugin that provides me with the code needed to create a dropdown menu on my CKeditor toolbar. This dropdown menu contains various styles that can be applied by clicking on them. Here is the code snippet: CKEDITOR.plugins.add( &ap ...

Trouble with CSS loading due to div in Visual Studio MVC

Currently, I am working with Visual Studio 2013 MVC and have a situation regarding the styling of my navbar in _Layout. The navbar includes a messages dropdown menu that utilizes CSS and JS extensively. Interestingly, when I load the messages as a partial ...

What could be causing the visibility issue with my navigation items in the bootstrap navigation bar?

Currently, I am experiencing a puzzling issue with the navigation bar on my live website. The navigation items seem to flicker for a brief moment and then disappear entirely. This unexpected behavior is certainly causing me some concern. I crafted the us ...

Troubleshooting the min-height problem with CSS in AngularJS Routing

My current setup is as follows in a basic HTML file: * { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; margin: 0; } section { display: block; width: 100%; min-height: 100%; padding: 1em } .b1 { background: ...

Enhancing webpage styles with AngularJS

Just starting out with AngularJS and eager to get the best approach to tackle this challenge. Describing my dilemma: I have an anchor element that, when clicked, needs to toggle between classes "show-all" and "hide-all" while also updating the styling of ...

A HTML List with Five Columns

Why isn't the CSS code filling up 100% of the screen? I have 5 columns with a width of 20% floating left. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset= ...

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

Ways to superimpose an image

Struggling to overlay an image over two div columns - I attempted using Z-index and experimented with various positioning properties. What am I missing? The triangle situated behind the two boxes, along with the additional text on JSFiddle, should appear ...

Styling Forms with SPAN Text in Place of Input or Select Controls

My current CSS is specifically designed to format labels above form input elements, but I am facing an issue when trying to replace the inputs with text from a database for displaying read-only data. Despite my efforts, changing the input fields to a span ...

Personalize your hr tag

https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...

What is causing the divs to not stretch across the entire width of the parent div?

Interactive Code Example: Snippet: <div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;"> <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; ...

Tips for creating a connecting line between two elements

I am currently working on developing a tree-like structure. I have successfully created numbers within circles using HTML badges. However, I am facing difficulty in drawing lines connecting one element to another. I attempted using left and right diagonal ...

What is the best way to stack col-xs-6 elements instead of having them side by side?

My form fields are currently set up using 3 col-xs-6 classes, but I'm not seeing the desired layout. I am aiming for: | col-xs-6 | | col-xs-6 | | col-xs-6 | However, what I am getting is: | col-xs-6 | col-xs-6 | | col-xs-6 | I understand that th ...

Clicking on an item causes it to move to the following line

Whenever I click on the third (bottom) line in the pagination block, the number item 30 keeps jumping to the next line. You can see it happening here. This issue only occurs in the Chrome browser. It seems like there might be a problem with the CSS. Can ...

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using: '& endsWith(MuiAccordionDetails-root)' I wish to achieve this because the ...

What are some ways to slow down the speed of a canvas animation?

I am currently working on an animation project using JavaScript and canvas. I have a reference fiddle where objects are generated randomly and fall from the top right corner to the bottom left corner, which is fine. However, the issue is that the objects a ...

Creating slanted lines using CSS / Bootstrap 3

I'm trying to create a webpage with slanted lines. Is it possible to set an angle of 20 degrees using three div elements? Currently, I have one div for the logo at the center and another for the navigation bar. I want the navigation bar to align with ...