Assuming that there are many elements in a webpage how do i apply CSS to: 

* All the `<hr>` that are AFTER an unordered list
* All the `<hr>` that are AFTER `<div>`
* All the `<span>` which are inside `<p><article>`
* All the `<span>` which are inside `<article>`

Example:

```
#first > p > em
{
    background: #739D00;
    color: #C7F83E;
    padding: .1em;
}

```
['https://Stackoverflow.com/questions/26003797', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3257288/']
The appropriate selectors, in order:

```
ul + hr {}
div + hr {}
p > article span {}
article span {}

```

Remarks:
========

The `+` selector selects all elements **immediately** after a given element. In general, `A + B`, will cause the first element `B` that follows after any element `A`, to be styled.

You can also use `~` in place of `+`, which would select all elements after a given element, no matter how far after.

**With `ul ~ hr`**

```
<ul></ul>
<hr /><!-- i get styled -->
<hr /><!-- me too -->
<hr /><!-- me too -->

```

**With `ul + hr`**

```
<ul></ul>
<hr /><!-- i get styled -->
<hr /><!-- nope -->
<hr /><!-- nope -->

```

`>` is for direct descendant.

My assumption of your questions:

```
<ul></ul>
<hr /><!-- You want to style THIS -->

<div></div>
<hr /><!-- You want to style THIS -->
<hr /><!-- ... but not this -->

<p>
    <article>
        <!-- there may be more nested elements here... --->
            <span></span><!-- You want to style THIS -->
    </article>
</p>

<article>
    <!-- there may be more nested elements... -->
        <span></span><!-- you want to style THIS -->
</article>

```
You can use those selectors:

* [Next-sibling combinator](http://dev.w3.org/csswg/selectors3/#adjacent-sibling-combinators) (`+`)

For example, `ul + hr` matches all `hr` that are immediately preceded by an `ul` (ignoring non-element nodes).
* [Following-sibling combinator](http://dev.w3.org/csswg/selectors3/#general-sibling-combinators) (`~`)

For example, `ul ~ hr` matches all `hr` that are preceded (not necessarily immediately) by an `ul`.
* [Child combinator](http://dev.w3.org/csswg/selectors3/#child-combinators) (`>`)

For example, `article > span` matches all `span` that are children of an `article`.
* [Descendant combinator](http://dev.w3.org/csswg/selectors3/#descendant-combinators) ()

For example, `article span` matches all `span` that are descendants of an `article`.