What CSS Selector Can Be Used to Select the First Div Within Another Div

CSS selector: first div within an id or class

If you want to select the first div within a specific class then you can use:

.class div:first-child

This however won't work when you've got the following HTML:

<div class="class">
    <h1>The title</h1>
    <div>The CSS won't affect this DIV</div>
</div>

It won't work because the div isn't the first child of the .class. If you wan't to target that div in this case I'd suggest adding another container (or adding a class to that div whatever you like :) )

Select DIV with another DIV that is outside that DIVs Parent using strictly CSS

Yes but to an extent. In this example I can rotate the second div in the html flow by hovering over the first div using ~.

#one {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}
#two {
  position: absolute;
  right: 10px;
  width: 100px;
  height: 100px;
  background: blue;
}
#one:hover ~ #two{
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  to {transform: rotate(360deg)}
}

<div id="one"></div>

<div id="two"></div>

How to select every 4th div inside another div CSS Selector

div:nth-of-type(4n) > div > div:first-child {
    background-color: yellow;
}

Fiddle 1: http://jsfiddle.net/abhitalks/6Laay9s6/

This will work even if your entire structure is nested in a wrapper(s), and/or there are elements before this structure.

Fiddle 2 (nested wrapper): http://jsfiddle.net/abhitalks/6Laay9s6/2/

And this:

Fiddle 3 (with elements): http://jsfiddle.net/abhitalks/6Laay9s6/3/

What is the CSS selector for selecting the first immediate child of an element?

The :first-child selector allows you to target the first element immediately inside another element.

<p>
  <div>First child...</div>
  <div>Second...</div>
  <div>Third...</div>
  <div>Fourth...</div>
</p>

In CSS:

p > div:first-child {
  font-size: 1.5em;
}

Edit: Important note is that you should never use div inside p. I wrote this code to show you how to select first child in your case, but it's really so bad to use div inside p. Whenever you use <div> between <p> and </p> like (for example) this:

<p> <div></div> </p>

Browser will attempt to correct (to be valid code) it to this:

<p></p> <div></div> <p></p>

Good luck!

What is the selector class for div inside another div

Just use the tag header as the start point to reach other selectors.

header>img {
  height: 220px;
  width: 300px;
}

header>.menu {
  background-color: red;
}

header>.Access {
  padding: 10px;
  background-color: yellow;
}

<section class="showcase">
  <header>
    <img src="https://images.unsplash.com/photo-1554232456-8727aae0cfa4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="company-Logo">
    <div class="menu">
      <ul>
        <li><a href="#">How it works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="Access">
      Get Early Access
    </div>
  </header>
</section>

How can I select a specific instance of an element inside a DIV using CSS?

Solution 1 : Immediate child selector

You will have to use the CSS selector >. This will target all the immediate child elements

Example :

.className > element {
}

See this below:

.container > div {  height: 40px;  width: 100%;  background-color: orange;  margin:10px;  }

<div class="container">  <div></div>  <div></div>  <div></div></div>

CSS selector for following tags

You can use :first-child selector. As from Docs:

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

Demo:

table tr td:first-child {  color: red;}

<table>  <tr>    <td>first line </td>    <td>second line </td>    <td>third line </td>  </tr></table>