How to Select an Element Only When Inside Another Element

How do I select an element only when inside another element?

Simply use the CSS descendant selector (a space) between the parent element and the descendant element:

ul.saft div.textSlide {
    /* CSS rules */
}

JS Fiddle demo.

In this case the rules applied to the div of class textSlide will only apply if its ancestor is a ul of the class saft. You could, instead, use the immediate child combinator, the > but then you'd have to specify the div in relation to each parent/ancestor up to the one whose class is required, which gives potentially difficult to maintain CSS (not in this case, but it can, over time, become problematic).

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>

Select an element that comes before another element with the same class in CSS

If I understand it correctly, you want

.alert {
  margin-bottom: 0;
}
.alert:last-child {
  margin-bottom: 20px;
}

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';.alert {  margin-bottom: 0;}.alert:last-child {  margin-bottom: 20px;}

<div class="alert alert-success" role="alert">The <code>margin-bottom: 20px</code> was overriden by <code>margin-bottom: 0</code>.</div><div class="alert alert-info" role="alert">The <code>margin-bottom: 20px</code> was overriden by <code>margin-bottom: 0</code>.</div><div class="alert alert-warning" role="alert">The <code>margin-bottom: 20px</code> was overriden by <code>margin-bottom: 20px</code>.</div>

How to select specific elements inside of another specific divs with query selector?

You can use the query selector to find the elements:

console.log(document.querySelectorAll('.linkPillar a'));

<div class="linkPillar">
        <a href="github"><img src="github.png" alt="GitHub"></a>
        <a href="facebook"><img src="fb.png" alt="facebook"></a>
</div>

Can I select an element that's not immediately after another, e.g. :not(.foo + .bar)?

It's worth noting that :not(.foo + .bar) is valid in Selectors 4, and implementations are on their way. Having said that, due to the nature of the adjacent sibling combinator + (and similarly the child combinator >), there is a Selectors 3 equivalent, although you will need a list of up to three complex selectors:

:first-child, :not(.foo) + *, .foo + :not(.bar)

But this is a direct conversion that accounts for elements that are not .bar. More likely, you just want to match any .bar that's not directly preceded by a .foo. In that case, it gets even simpler:

.bar:first-child, :not(.foo) + .bar

And you can pick and choose further depending on your needs:

If not being preceded by a .foo means .bar becomes the first child, you can just use .bar:first-child.
If .bar is guaranteed to have a preceding sibling, you can just use :not(.foo) + .bar.

If you need to account for both possibilities, then listing both as shown above will do just fine.

Note that the .foo and .bar selectors don't necessarily have to be different. You can match any .bar that's not immediately preceded by another .bar with the exact same technique.

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/

CSS selector for something not inside something else

:not(.not-inside-this) and *:not(.not-inside-this) with the * are equivalent; in the case of the former, the universal selector is implied. See the spec.

It is currently not possible to construct a CSS selector that matches elements that are not descendants of specific elements for the reasons given in the following questions:

CSS negation pseudo-class :not() for parent/ancestor elements
Is the CSS :not() selector supposed to work with distant descendants?

The selector

.select-inside-this :not(.not-inside-this) .select-this

matches .select-this elements that are descendants of some element that is not .not-inside-this, which in turn is a descendant of .select-inside-this. It does not match .select-this elements that are not descendants of .not-inside-this within .select-inside-this.

This means, first off, that your selector will incorrectly match the following:

<div class="select-inside-this">
    <div class="bar">
        <div class="not-inside-this">
            <div class="select-this"></div>
        </div>
    </div>
</div>

... because one of the ancestors of .select-this, .bar, is :not(.not-inside-this).

Additionally, this implies at least three levels of nesting (though it could be more). In your example, there are no other elements between .two.select-this and its containing .select-inside-this, so it will never match that element. This is why James Donnelly suggests adding .select-inside-this > .select-this to account for that particular case.

However it is still not possible to write a single complex selector using descendant combinators to match elements without a specific ancestor. The only way is to repeat the child combinator method with as many :not(.not-inside-this) as necessary, but this requires that you account for all possible cases. If you can't do that, then you're out of luck with CSS selectors.