Question: I love the "after" (`+`) selector, it's good to style things after specific elements.
Such as:

```
.title+div {
    background-color: yellow;
}

```

would make the background color of the div following the element with `.title` class, yellow.

However, I need a more dynamic way of selecting things.

How would you express this in css?:

"Make the background color of the `visibility:visible` element, yellow"

Any direction is appreciated.

Answer: 
You can't select non-inline properties in CSS, so something like `div[visibility:visible]` wouldn't work unless you explicitly stated the property inside the style attribute for the element.

The best way to select an element like this is to select the *class* with the styles applied to it (if there is one).

```
.title + .visible {
    background-color:yellow;
}

```

If this isn't the case, you should almost always use JavaScript.
This is *potentially* possible, albeit it's very, *very* fragile and has some requirements.

First, the `visibility:visible` must appear in the element's inline `style` attribute, like so:

```
<span style="visibility:visible">element text</span>

```

Second you must know the *exact* string, if a space is added you'll need to either change selector or account for both/all possibilities.

So, with those provisos, you can implement this selection as follows:

```css
[style*="visibility:visible"] {
  background-color: yellow;
}

[style*="visibility: visible"] {
  border: 1px solid #000;
}
```

```html
<span style="visibility:visible">element text</span>
<span style="visibility: visible">element text</span>
```

Now, given those requirements, it's usually far easier to just use JavaScript (or one of its libraries, if you must):

```js
Array.prototype.forEach.call(document.querySelectorAll('span'), function (el, index) {
  if (el.offsetHeight) {
    el.style.backgroundColor = 'yellow';
    el.textContent = el.textContent + ' (' + index + ')';
  }
})
```

```css
span {
  visibility: visible;
}

.jsAddedClass {
  background-color: yellow;
}

#exception {
  display: none;
}
```

```html
<span>element text</span>
<span>element text</span>
<span id="exception"></span>
```

References:

* CSS:
	+ [Substring matching (`[attribute*="value"]`) attribute selectors](http://www.w3.org/TR/selectors/#attribute-substrings).
* JavaScript:
	+ [`Array.prototype.forEach()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach).
	+ [`HTMLElement.offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight).