CSS Selectors

What symbol is used to select elements with a particular class?

.

If there's multiple div's of class "container-fluid" on a page, how would you select ONLY the ones that appear anywhere inside a div of class "container"?

.container .container-fluid

What is the opposite of "nth-child", and in what cases might it be used?

:nth-last-child(A) In cases where there's tons of the same child elements on a page, and you don't want to count up to 30 (out of 33), for example. Instead just count back from 33 with something like "div:nth-last-child(3)"

What does "li:last-child" select? A) All <li> elements that are last children. B) The last child of all <li> elements.

A

What would "li:nth-last-child(2)" select? A) All <li> that are second-to-last elements. B) All second-to-last elements of any <li>.

A

What is the difference between a child element and a descendant element? How are they selected?

A child element refers to an element nested directly inside another element. It is selected with a >. Example: "div > p" selects all <p> that are direct children of a <div>. A descendent element is any element inside another element, no matter how deep. It is selected simply with a space. Example: "div p" selects all <p> inside of any <div>, no matter how deep.

What is another name for a direct sibling?

Adjacent sibling

What would "div ul.unique" select?

All <ul>'s with a class of "unique" inside of a <div>.

What would "#big.wide" select?

All elements with id="big AND class="wide"

What does the pseudo-selector ":first-child" select when not used in combination with anything else?

All first-child elements on the page.

What does the pseudo-selector ":last-child" select when not used in combination with anything else?

All last-child elements on the page.

What would "ul li:only-child" select?

Any <li> that is an only child inside of a <ul>.

What is a child element?

Any element nested directly inside another element. They're only ONE indentation in from their parent. ("directly" is the key word. Elements inside another element -- but nested deeper, i.e. 2 or more indentations -- are called descendant elements.)

What would "ul > .featured-item" select?

Any element of class "featured-item" that is a direct child of a <ul>.

What does the pseudo-selector ":only-child" select when not used in combination with something else?

Any element that is the only element inside of another one.

What does "p:first-child" select? A) The first child of all <p> elements. B) All <p> elements that are first children.

B

Would "p strong" select... A) All <p> inside of <strong> B) All <strong> inside of <p> C) Only the first instance of a <p> inside of <strong> D) Only the first instance of a <strong> inside of <p>

B

How would you select all elements with an id of "phone" and a class of "number"? A) #phone .number B) .phone #number C) #phone.number D) #number.phone

C (A, with a space in between, would select only elements of class "number" INSIDE of elements with an id of "phone")

What is a comma referred to as in CSS selectors? How is it used?

Combinator (You can combine selectors with a comma.) "#img-small, .contact" would select all elements with an id of "img-small" or a class of "contact" on the page.

In HTML markup, what are siblings?

Elements on the same level, i.e. they follow one another, i.e. they have the same indentation.

Using the universal asterisk selector, what would "p *" select?

Every element inside all <p> elements.

What would ":nth-child(8)" select?

Every element that is the 8th child of another element.

What would "p + .intro" select?

Every element with class="intro" that directly follows (is a direct sibling of) a <p>.

True or False: You cannot use the ":first-child" pseudo-selector in combination with anything else.

False (You can.) As in, "p:first-child" selects all first-child <p> elements.

What happens if you use just a plain "div" or "p" as your CSS selector?

It selects ALL matching elements (in this case, div's or p's).

What is the "first child"? How do you select it?

It's just the first child element inside another element. :first-child

What is the "last child"? How do you select it?

It's just the last child element inside another element. :last-child

Quit on slide 22 of 26 in CSS Diner

N/A

What does the "nth-child(A)" pseudo-selector select?

Selects an element by its order in another element, where A is that order.

What are elements that follow one another? Also described as elements "on the same level"? Also described as elements that "have the same indentation"?

Siblings

What does the ":first-of-type" selector select?

The first element of that type within another element.

What is the difference between + and ~ in CSS?

They're both used to select siblings, BUT... + = ADJACENT sibling (elements that directly follow another element) ~ = GENERAL sibling (elements that follow another element, directly or indirectly)

True or False: In cases where there is only one element, that element counts as the first-child, only-child and last-child.

True

A general sibling selector (~) is very similar to an adjacent selector (+) except it gets ________ siblings of an element that follow it instead of _________.

all one

What does a descendant selector select?

an element inside another element, directly or indirectly. (it differs from child selectors (>), which only select direct descendants.) "p strong" will select ALL <strong> that are descendants of any <p>

How would you select every <a> that directly follows (is a direct sibling of) a <div>?

div + a

How would you select all first-child <p> elements that are inside a <div>?

div p:first-child

How would you select the second <p> in every <div>?

div p:nth-child(2)

Instead of using... div:nth-of-type(2), div:nth-of-type(4), div:nth-of-type(6), etc What could be used instead? What would it select

div:nth-of-type(even) All even instances of a <div>. (You can also use "odd")

How would you select any <a> that is a direct child of a <p>?

p > a

How would you select all second-to-last <p> elements?

p:nth-last-child(2)

How would you select the first <span> inside any element?

span:first-of-type

How would you select all <span> elements that are the only child of some other element?

span:only-child

How do you select an element only if it directly follows (a direct sibling) another element?

the + sign

How would you select all last-child <li> elements that are inside of any <ul>?

ul li:last-child

How would you select every element inside all <ul class="fancy"> elements?

ul.fancy *

If there's multiple unordered lists on a page, how would you select only the ones that have a class of "important"?

ul.important

What is the general sibling selector?

~

What symbol is used to select elements with a particular id?

#

If there's multiple lists (and therefore tons of <li>) on a page, how would you select only the <li> that appear inside a list (a <ul> or <ol>) with an id of "contact-list"?

#contact-list li

How can you select everything?

* (asterisk)