CSS Selectors Flashcards

1
Q

CSS Purpose

A

mainly to prescribe how the various HTML elements in a set of HTML documents should render, on the screen, on paper, or in other media.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Three different ways in that CSS can be used in HTML documents:

A
  • An external style sheet. A reference inside the element (inside the section)
  • An internal style sheet. Defined within the element (inside the section)
  • An inline style. added directly to the element (which applies the rules) as an attribute
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

When multiple CSS styles are defined for the same element,

A

the value from the last read style sheet will be used.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Styles application priority:

A
  • Inline style
  • External and internal style sheets
  • The browser default value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

CSS rule-set components:

A
  • selector(s)

- declaration block(s)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

The declaration block contains one or more declarations separated by semicolons.

A

Each declaration includes a CSS property name and a

value separated by a colon.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

The declaration block contains one or more declarations separated by semicolons.

A

Each declaration includes a CSS property name and a

value separated by a colon.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

CSS selectors are used to find elements in the HTML document based on

A

element name, ID, class, attribute, or other specifiers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

CSS Selector: Elements div with an attribute class=”even”

A

div.even

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

CSS Selector: An element with id=”login”

A

login

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

CSS Selector: All elements

A

*

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

CSS Selector: All input elements

A

input

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

CSS Selector: All p and all div elements

A

p,div

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

CSS Selector: All input elements (descendents) inside all div elements

A

div input

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

CSS Selector: All input elements that have the div element as the (direct) parent

A

div > input

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

CSS Selector: Selects all p elements that are placed immediately after element br

A

br + p

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

CSS Selector: Selects all p elements that are placed immediately before element br

A

p ~ br

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

XPATH: Elements div with an attribute class=”even”

A

//div[@class=”even”]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

XPATH: An element with id=”login”

A

//*[@id=”login”]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

XPATH: All elements

A

//*

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

XPATH: All input elements

22
Q

XPATH: All input elements inside all div elements

A

//div//input

23
Q

XPATH: All input elements that have the div element as the parent

A

//div/input

24
Q

CSS Selector: All elements with the lang attribute

25
CSS Selector: All elements with the lang attribute of exactly en
[lang=en]
26
REVIEW ! CSS Selector: All elements that have the lang attribute equal to en or starting with the string en followed by a hyphen
[lang | =en]
27
REVIEW ! CSS Selector: All elements that have the lang attribute ending with the string en
[lang$=en]
28
CSS Selector: All elements that have the lang attribute whose value is a whitespace-separated list of words, one of which is exactly the string "en"
[lang~=en]
29
CSS Selector: All elements that have lang attribute containing string en
[lang*=en]
30
CSS selectors for form elements: Selects all checked elements (for check boxes, radio buttons, and options) that are toggled to an on state
:checked
31
CSS selectors for form elements: Selects any form element that is the default among a group of related elements
:default
32
CSS selectors for form elements: Selects all elements that have been defined
:defined
33
CSS selectors for form elements: Selects all elements that have been disabled
:disabled
34
CSS selectors for form elements: Selects all elements that have been enabled
:enabled
35
CSS selectors for form elements: Selects the element currently with focus
:focus
36
CSS selectors for form elements: Selects the element currently with focus
:focus
37
CSS selectors for form elements: Selects any form elements that fail to validate
:invalid
38
CSS selectors for form elements: Selects form elements which do not have required attribute set
:optional
39
CSS selectors for form elements: Selects any input elements whose current value is outside the min and max attributes
:out-of-range
40
CSS selectors for form elements: Selects elements which are not editable by user
:read-only
41
CSS selectors for form elements: Selects elements which are editable by user
:read-write
42
CSS selectors for form elements: Selects form elements with required attribute set
:required
43
CSS selectors for form elements: Selects form elements that do validate successfully
:valid
44
CSS selectors for form elements: Selects the links that a user has already visited
:visited
45
CSS: Selects the elements that do not match the specified selector
:not()
46
CSS: Selects all elements that are first children of their parent elements
:first-child
47
CSS: Selects all elements that are last children of their parent elements
:last-child
48
CSS: Selects all elements that are nth children of their parent elements
:nth-child()
49
CSS: Selects all elements that are nth children of their parent elements counting from the last child
:nth-last-child()
50
CSS: Selects all elements that are nth div children of their parent elements
div:nth-of-type()