Using CSS attribute selector to simulate a CSS style selector

Although it might be considered strange by some, sometimes we just want to set up CSS styles on elements selected based on other style values, that are set in other ways, such as inline styles placed by internal JavaScript components that our app uses.

Here is a real-life example. Let’s assume that inside a grid we want input elements of all cells to have a specific height:

.cell input {
    height: 24px;
}

However, inside some grid columns we use a multi-selector combo box component, displaying multiple items with checkboxes in a pop-up whenever the user clicks the drop down button, allowing him or her to change selections to apply to the cell value. And because the checkboxes from the fixed position and z-index-enabled pop-up are internally considered logical parts of the grid cells, the style for input elements declared above applies to them too, but we clearly don’t want that!

To resolve the problem, we can try using an attribute selector and restore the height to auto for input elements inside the pop-up using the style attribute itself:

.cell [style*="z-index:"] input {
    height: auto;
}

Strange but this works if the popup is defined with an inline style containing a z-index setting. You can also add the exact value of z-index but then it is important to check if there is a space or not between the column character and the number and copy it properly, because the selector will check the string in a strict fashion. (Too bad that – at least so far – there is no wildcard character that we could use inside the checked value.)

Advertisements

About Sorin Dolha

My passion is software development, but I also like physics.
This entry was posted in JavaScript and tagged , , , . Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s