1.6 CSS Selectors Flashcards
1
Q
What’s the purpose of CSS selectors?
A
CSS selectors let’s us target HTML
by any of its attributes or values.
2
Q
What are 3 types of CSS attributes?
FIT
A
- For
- ID
- Type
3
Q
What 3 characteristics of attributes?
A
Attributes follow elements
Attributes add specificity
Attributes provide supplemental information
4
Q
How do you target a class?
A
Use brackets on the selector
5
Q
When you target by class, is it changing
attributes inside or outside of the class?
A
When you target by class, it only changes
those attributes with a class
6
Q
How do you target a specific class?
A
specify the class by name
“form-contact” is a specific class within the CSS
Only this class is being targeted
7
Q
How do you target by ID?
A
Use ID
Write specific ID name
8
Q
How do you target by text?
A
9
Q
What does the CSS rule do in this example?
A
Only input fields with values of text that receive the background color
10
Q
How do you target a placeholder?
A
Specify placeholder
11
Q
What is this CSS doing to the placeholder its targeting?
A
Only input fields with values of placeholder
that receive the background color
12
Q
How do you target email field?
A
Specify email
13
Q
What does the CSS rules do in this scenario?
A
Only input fields with value of email
that receive the background color
14
Q
How do you target buttons with CSS attribute selectors?
A
Specify buttons
15
Q
How do you target links?
A
use the a anchors
16
Q
What is DRY CSS?
A
Dry stands for
Don’t repeat yourself
17
Q
Why should you not repeat code?
A
It makes maintenance difficult
Increase style sheet,
browser works hard
Only define once
18
Q
How to write more flexible, efficient code?
A
Create reusable attributes that can be
reapplied in needed areas without duplication
19
Q
Why shouldn’t you use attribtue selectors?
A
Slower to interpret by developers
Slower to interpret by browsers
20
Q
Why are reusable elements useful? Example?
A
It prevents duplication of identical code.
Example: border radius: adding a curve to border edges
21
Q
How do you use reusable CSS snippets?
A
Create reusable class attributes
Add the classes to the HTML
Apply the class to any element that needs that style
22
Q
In the following example, why do we have
the button attributes both joined and separated in the CSS?
A
Joined btn class: shared properties
Separated classes: unique properties of buttons
23
Q
How do you create inline buttons on smaller devices?
A
Steps
- Add Media Query
- Add CSS
24
Q
What does this code snippet do on smaller devices?
A
It makes the buttons appear below each other,
vertically, because of the block display method.
25
When it comes to combinators, what type
of children does the \> combine?
The **\>** combinator targets a **direct child** of an element
26
What element does the **+** combinator target?
The + combinator targets an element's **immediate sibling**
27
What sibling is targeted with the **~** symbol in CSS selectors?
The **~** combinator targets **all the specified siblings** that follow an element
28
Given the use of the \> symbol,
What type of combinator is this example?
Direct child combinator
29
What does this direct combinator do to anchor links?
Changes the font size to 14px
30
What symbol do you use to reach an immediate sibling?
The **+ combinator** targets an element's **immediate sibling**
31
What symbol do you use to reach all specified siblings?
The **~** combinator targets all the specified
siblings that follow an element
32
In this code snippet, what is happening in this adjacent combination? Scenario: two buttons are too close to each other
Leaving first button flush with content and the second and subsequent buttons have proper padding
33
How much margin is being applied through this adjacent combinator?
First button left aligned
Second button gets the left margin of 20px.
34
What does this sibling combinator do within the CSS?
What this does is it targets labels, under an H1 tag; it gives them the defined CSS style specified above
35
What is first element styling within CSS?
It's applying CSS style, to the first item or element in a group.
Let’s say you have a list of 10 items.
You only want to style the 1st of the 10 items.
36
What property do you use with first child styling?
first-child
37
What symbol do you use to separate the HTML element from the first-child element?
: symbol separates both
38
In the CSS example, how is the first-element being styled?
background color is being set to a hexadecimal color
the font color is being set to white;
39
What does the last-child element styling do as a CSS attribute?
If you have a group of elements together, and you only want a special style applied to the **very last item** of the group, the last-child attribute helps you do just that
40
What separates the last-child element from the HTML element?
: symbol
41
Is there a space between parent and child attributes?
No.
No spaces between parent/child attributes
42
What does an only-child pseudo-class achieve?
The :only-child CSS pseudo-class represents an element without any siblings.
43
Why would you use an **:empty** element?
Prompt user to inform there isn’t anything there
44
In what 3 scenarios would it make sense
to use a **:empty** element?
A **form** field or **order form** or **login screen**
where the user forgot to input information.
45
How does this :empty element benefit end user?
Alerts them with a red color to a field they missed filling out, giving the end user form feedback
46
What is **substrings**?
Substrings= pieces
47
What does the **begins with selector** do?
Begins with Selector **matches value**
48
How do you summon the begins with? (symbol)
^ starts the begins with element
49
In this begins with example, what is being matched?
The http:// is signalling what it begins with, that's what it's matching content for
50
What 3 things happening in this specification value?
In the example, it’s
* targeting IMAGES
* with the TITLE
* that BEGINS WITH “product-”
51
When it comes to begins with or specifications,
do you use spaces in the syntax?
No
No spaces used
52
How is the ends with selector helpful?
It helps you style things by file extensions
53
Can you name 3 extensions that would be perfect targeting options for the **ends with selector**?
.pdf
.jpg
.svg
54
What symbol is used to launch the ends with selector?
**$** symbol starts with ends with selector
55
In this ends-with example, what is being selected?
images ending with .pdf
56
Based on this CSS snippet, what's happening with the ends with selector?
It's scanning for files that end with .pdf to give them an image to represent the file format of PDF.
57
What does the contain selector do?
It looks for the content that may contain at least one aspect of what you're selecting for.
58
Why would you want to use the contains selector?
When you know the keyword or category of item you want to select specifically for styling.
59
In this example with contains selector,
what is the CSS styling doing?
1. background-repeat: no-repeat;
2. background-size: 18px 18px;
3. padding-left: 25px;
60
What symbol do you use to initiate the contains selector?
\* defines the contains selector
61
In this contains example, what element is being styled?
Image files with thumb in the file path received styling
62
What keyword is being styled with this contains selector?
files with lake are being styled
63
When should you use special selectors?
Use when you don’t have control over HTML because
of CMS limitations to access code
64
What is a use case for **focus state** in the context of a form?
A **focus state** use case is to draws **attention** to a
textbox on a **form** where users enter their info with colors or other **styling details**.
65
How do you create a focus state for an input field?
input:focus
66
How do you create a focus state for a textarea?
input:textarea
67
How do you group focus states when the same styling applies?
use a comma to separate the items
68
In the example where you have 2 focus states, what's the rest of the CSS syntax to give it a specific color for the input and text area?
open curly braces {
color
semi-colon
ending curly braces }
69
What is happening when this CSS is applied to
the focus states within the form?
In the example above, when this CSS is applied, it gives textboxes specified a hover effect in green to draw attention, highlighting where the user is in the form fillout process.
70
What is a disable state?
Disable makes something unavailable, unclickable, unuseable
71
What are the visual cues of a disabled state?
It can be styled to be grayed-out to further validate
visually that a choice is not available.
72
What is the CSS for a disable state?
**:disabled** followed by ...?
:disabled class
Open curly brace
background styling
semi colon
Ending curly brace
73
Can you style a checkbox?
Yes
You have to specify it as an input type
74
In this example of checkbox formatting, what 4 things is the
CSS communicating at each point?
What this syntax is saying
1. Target: input
2. Type of input = items with checkboxes
3. When checkbox is CHECKED,
4. Style LABEL with this CSS rules
75
How do you write the checkbox specific formatting?
Part 1: remember no spaces
input
[
type
=
"checkbox"
]
76
What's part 2 of checkbox formatting?
You've specified input,
[, type, =, "checkbox", and] all with no spaces
**:**
**checked**
**+**
**label**
77
What's the 3rd part of formatting a checkbox?
Add styling details
ex font-weight: bold;
78
What is nth child selector?
It lets you reach any combination of child elements,
based on any position of parent element.
79
In the CSS example of **nth child**, what's
happening to the items in the list?
When (even) is specified it targets and formats based off of the order, changing only those items that are even. So 2,4,6,8, 10 will change, not the odd numbered ones.
80
How do you write the syntax for nth child
for even item numbered item selection?
li:nth-child(even)
81
How do you write the syntax for even nth child selector after you have specified li:nth-child(even) {?
You add styling using basic CSS syntax for styling
open curly braces, properties, values, semi-colon, ending curly braces
82
Can you target odd numbered items in a list?
Yes, you can
you would use the (odd)
83
What's the syntax for an nth-child with odd numbers selected?
li:nth-child(odd)
open curly brace
styling with property: value;
ending curly brace
84
Can you target a specific list item using nth-child?
Yes, it's possible to target a specific number in a list
85
What CSS syntax do you use to specify a
specific numbered item within a list?
li: nth-child(3) {
property: value;
}
86
When you specify a single number within
a **nth-child** selection what's happening?
When the expression is reduced to a single number it only targets that number from the list.
87
How does **from this point forward** work?
You have base number then it applies styling based on the number you select (ex. start here then skip 2, 3, 4)
88
What value does n have?
1
89
In the following CSS snippet, what does the
from this poitn forward selection mean?
A value as 1 = same as N
Targets 4 and every value after receives same formatting
90
How do you write the syntax for from this point forward?
Conditions of 2n and move in intervals of 3
li: nth-child(2n + 3) {
property: value;
}
91
What is skip pattern selection?
Give a starting point, then an interval for
skipping to select and apply CSS styling
92
In this example what does the 3 and 2 convey as instructions?
3 tells it where to begin
2n tells it the pattern to follow
93
Based on this example, what's happening within the row of items?
The styling was that it started at
Row 3 and applied the formatting every 2 rows.
94
What's the simplified way to specify styling of every 3rd item?
li: nth-child(3n) {
background: green;
color: white;
}
95
What is the syntax for the nth-child when the
skip pattern is set to 3n simplified?
96
Based on this negative n value example, what is it
communicating in the CSS selection process?
Tells it where to begin, list item 3 and then
And it formats everything that precedes it (1&2)
Top 3 items are formatted correctly
97
What is the syntax for a negative n value?
98
What is the advantage of :nth-of-type over nth-child?
You use the ends of type to inform the browser to focus on **elements** rather than list items. It can handle **interruptions**.
99
Do nested items affect **:nth-of-type**?
No, **:nth-of-type** can handle interruptions
and different types of elements.
100
What's happening in this example of :nth-of-ninth?
This selector targets the 4th div inside the parent,
no matter what type of child elements come before it:
101
Is the heading elements affecting this :nth-of-type example?
No. It doesn’t let headings or other DIVs in the middle of the list get in the way of targeting.
102
What's the syntax to write **:nth-of-type**,
as seen in the prior example?
div: nth-of-type(4) {
property: value;
}
103
What is :nth-of-last-type doing?
This is a from bottom to top selectors
1 targets last row (at the very bottom) of a group.
104
How do you write the syntax for a **:nth-last-of-type?**
105
Why do we use nth-child, nth-of-type or :nth-of-last-type?
To help get around constraints in code due to CMS
106
What is the root element selector?
It targets the highest level HTML element
107
What does this CSS snippet do with the root element?
:root
applies styling
108
How do you write the syntax for :root?
109
Why would you use **:root** over HTML selector?
Root has higher specificity.
110
Can :root be used with other languages?
:root can be used with SVG and other languages
111
What does :root do?
Root targets top most element
112
What does the target pseudo class do?
The **:target** CSS pseudo-class represents a unique element (the target element) with an **id matching** the **URL**'s fragment.
113
When the IDs match, the :target psuedo class does what?
In this particular instance it applies the target formatting, when a link is clicked upon. It’s in essence creating a selection effect.
114
What is the syntax to write a :target class?
115
What is target by ID?
It applies styling to a specific specified ID.
116
Why would you want to use target by ID?
It's useful when the styles should be applied
to only 1 item in a group.
117
In this example of style by ID, how is the ID being specified?
With the # symbol
118
After specifying the ID name, how is the target written in the syntax?
:target with no spaces between
119
What's the full syntax of target by ID?
ID, target, css, & curly brackets
120
When the browser sees the target by ID, what does it do?
The browser hones in on the specified ID, col-c, as its target, only applying it to that ID class. Upon click, target formatting is active.
121
What is a NOT selector?
It selects everything but one item from a group.
Helps with exclusion of an item from formatting
122
What element is being excluded from this :not selector?
It's styling all divs, excluding div a, from styling.
123
How does it know which div to exclude?
It's specified by the ID, using a # symbol.
124
What is the syntax to write a not selector?
125
How do you specify that it should style
every element in a group except a button?
Specify type
Then submit button
126
What's the syntax to write a submit button with :not selector?
127
How do you add padding just to elements
that follow, leaving the first element
flush with the edge of the page?
Use the not element to exclude first elements using first-child
128
What two elements is the first-child
referring to in the example?
It's referring to the first column (.col) and first link (nav a).
129
How do you separate the element from the not selector?
: symbol
130
What goes into the parenthesis for the not selector?
(:first-child)
131
Do you need any punctuation after the parenthesis?
No
132
What is a pseudo element?
A CSS pseudo-element is a keyword added to a selector that lets you **style a specific part of the selected element(s)**
133
What does the pseudo element of :first-line do?
It applies styling to the first line of text within a paragraph.
134
Does :first-line apply formatting to the first sentence?
No, just the first line of text.
135
```
What separates the class from the
pseudo element in the syntax?
```
: colon
136
What's the full syntax for writing for
this pseudo element of :first-line?
137
Why would you use the first-letter pseudo element?
To create drop letter effect, use the first-letter pseudo element.
138
How do you target the class?
Use a . period to specify class
139
How do you specify the :first-letter pseudo class?
:first-letter
140
What's the full syntax for the :first-letter pseudo element?
141
Can you use :: for pseudo elements?
Yes, the browser will interpret :: with pseudo elements.
142
Does a pseudo element appear in HTML?
No, pseudo elements appears in the CSS.
143
What does the before pseudo element do?
It adds an element before the HTML, straight from the CSS.
144
Why would you use the ::before pseudo element?
To have more styling and design options
145
What is this ::before pseudo element doing?
It's adding a jpg icon before the JPG in the
HTML text; it's an icon for an image.
146
What's the full syntax for the ::before pseudo element example?
147
Can you apply an element after another element?
Yes, using the pseudo element ::after
148
In this ::after pseudo element example, is the image being applied before or after the text in HTML?
After
149
How do you select the class?
.jpg
. indicates class
jpg class name
150
What's the syntax for the ::after pseudo element?
::after
151
What's the full syntax for the ::after example?
152
What does this combination of before and after do?
It adds a red circle before and after a
headline element from the CSS.
153
How do you specify the before and after element?
use ::
::before
::after
154
For DRY code, how do you condense yet separate?
Use the same code, to condense
Use commas, to separate elements
155
What is the attr function within pseudo elements?
The attr() CSS function is used to **retrieve the value** of an attribute of the selected element and use it in the stylesheet.
156
How is the title retrieved using the attr function?
content:attr(title);
157
How does the attr function work?
It's retrieving information from HTML using
single usage, type, or fallback properties.
In the case of this example, it's retrieving
the titles using title property found within a class.
158
What's the logic behind this code with attr function?
3 steps
How this code works
1. First it targets the class | **.d-loads**
2. Second the descendent | **a::after**
3. Third the titles | **content:attr(title)**
159
