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/']
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`.
Instead of `<hr>`, use border-bottom 

article is a block-level item that essentially replaces a `<div>` tag, and `<p>` tags should be within `<article>`, 

```
article {border-bottom:#C3F 8px solid}
article span {font-size:200%; color:#C3F}

ul {border-bottom:#C3F 8px solid}

```

and in html, looks like this:

```
<article>
 <h1>article headline</h1>
 <p> My paragraph here <span> with a span section</span> and a border below the article, not paragraph.</p>
 <p>Another paragraph here</p>
 </article>
 <ul><li>Item one</li>
      <li>Item two</l>
  </ul>

```