CSS Almanac- Selectors

Question 1

CSS Selectors

Answer 1

CSS selectors are patterns used to select elements in the DOM.

Question 2

CSS Properties

Answer 2

CSS properties style elements through their values.

Question 3

A pseudo element which allows you to insert content after any other content onto a page from CSS (without needing to be in the HTML)

Answer 3

::after

preview:

CSS
div::after {
content: “hi”;
}

HTML

<div>

hi
</div>

Question 4

A pseudo element which allows you to insert content before any other content onto a page from CSS (without needing to be in the HTML)

Answer 4

::before

• The value for content can be:

A string: content: “a string”;
An image: content: url(/path/to/image.jpg);
Nothing: content: “”; - Useful for clearfix and inserting images as background-images
A counter: content: counter(li); - Really useful for styling lists until :marker comes along.

Question 5

A pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It’s usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It’s most typically used on anchor links (<a>).</a>

Answer 5

:active

Question 6

The pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.

Answer 6

:any-link

Question 7

What is adjacent sibling?

Answer 7

A combinator selector. A way of combining two selectors.

eg.)

p + p {
margin: 0;
}

selects two paragraph tags that is directly after another paragraph tag (with nothing in between)