1.6 CSS Selectors Flashcards
What’s the purpose of CSS selectors?
CSS selectors let’s us target HTML
by any of its attributes or values.
What are 3 types of CSS attributes?
FIT
- For
- ID
- Type
What 3 characteristics of attributes?
Attributes follow elements
Attributes add specificity
Attributes provide supplemental information
How do you target a class?
Use brackets on the selector
When you target by class, is it changing
attributes inside or outside of the class?
When you target by class, it only changes
those attributes with a class
How do you target a specific class?
specify the class by name
“form-contact” is a specific class within the CSS
Only this class is being targeted
How do you target by ID?
Use ID
Write specific ID name
How do you target by text?
What does the CSS rule do in this example?
Only input fields with values of text that receive the background color
How do you target a placeholder?
Specify placeholder
What is this CSS doing to the placeholder its targeting?
Only input fields with values of placeholder
that receive the background color
How do you target email field?
Specify email
What does the CSS rules do in this scenario?
Only input fields with value of email
that receive the background color
How do you target buttons with CSS attribute selectors?
Specify buttons
How do you target links?
use the a anchors
What is DRY CSS?
Dry stands for
Don’t repeat yourself
Why should you not repeat code?
It makes maintenance difficult
Increase style sheet,
browser works hard
Only define once
How to write more flexible, efficient code?
Create reusable attributes that can be
reapplied in needed areas without duplication
Why shouldn’t you use attribtue selectors?
Slower to interpret by developers
Slower to interpret by browsers
Why are reusable elements useful? Example?
It prevents duplication of identical code.
Example: border radius: adding a curve to border edges
How do you use reusable CSS snippets?
Create reusable class attributes
Add the classes to the HTML
Apply the class to any element that needs that style
In the following example, why do we have
the button attributes both joined and separated in the CSS?
Joined btn class: shared properties
Separated classes: unique properties of buttons
How do you create inline buttons on smaller devices?
Steps
- Add Media Query
- Add CSS
What does this code snippet do on smaller devices?
It makes the buttons appear below each other,
vertically, because of the block display method.
When it comes to combinators, what type
of children does the > combine?
The > combinator targets a direct child of an element
What element does the + combinator target?
The + combinator targets an element’s immediate sibling
What sibling is targeted with the ~ symbol in CSS selectors?
The ~ combinator targets all the specified siblings that follow an element
Given the use of the > symbol,
What type of combinator is this example?
Direct child combinator
What does this direct combinator do to anchor links?
Changes the font size to 14px
What symbol do you use to reach an immediate sibling?
The + combinator targets an element’s immediate sibling
What symbol do you use to reach all specified siblings?
The ~ combinator targets all the specified
siblings that follow an element
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
How much margin is being applied through this adjacent combinator?
First button left aligned
Second button gets the left margin of 20px.
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
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.
What property do you use with first child styling?
first-child
What symbol do you use to separate the HTML element from the first-child element?
: symbol separates both
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;
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
What separates the last-child element from the HTML element?
: symbol
Is there a space between parent and child attributes?
No.
No spaces between parent/child attributes
What does an only-child pseudo-class achieve?
The :only-child CSS pseudo-class represents an element without any siblings.
Why would you use an :empty element?
Prompt user to inform there isn’t anything there
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.
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
What is substrings?
Substrings= pieces
What does the begins with selector do?
Begins with Selector matches value
How do you summon the begins with? (symbol)
^ starts the begins with element
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
What 3 things happening in this specification value?
In the example, it’s
- targeting IMAGES
- with the TITLE
- that BEGINS WITH “product-”
When it comes to begins with or specifications,
do you use spaces in the syntax?
No
No spaces used
How is the ends with selector helpful?
It helps you style things by file extensions
Can you name 3 extensions that would be perfect targeting options for the ends with selector?
.jpg
.svg
What symbol is used to launch the ends with selector?
$ symbol starts with ends with selector
In this ends-with example, what is being selected?
images ending with .pdf
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.
What does the contain selector do?
It looks for the content that may contain at least one aspect of what you’re selecting for.
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.
In this example with contains selector,
what is the CSS styling doing?
- background-repeat: no-repeat;
- background-size: 18px 18px;
- padding-left: 25px;
What symbol do you use to initiate the contains selector?
* defines the contains selector
In this contains example, what element is being styled?
Image files with thumb in the file path received styling
What keyword is being styled with this contains selector?
files with lake are being styled
When should you use special selectors?
Use when you don’t have control over HTML because
of CMS limitations to access code
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.
How do you create a focus state for an input field?
input:focus
How do you create a focus state for a textarea?
input:textarea
How do you group focus states when the same styling applies?
use a comma to separate the items
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 }
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.
What is a disable state?
Disable makes something unavailable, unclickable, unuseable
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.
What is the CSS for a disable state?
:disabled followed by …?
:disabled class
Open curly brace
background styling
semi colon
Ending curly brace
Can you style a checkbox?
Yes
You have to specify it as an input type
In this example of checkbox formatting, what 4 things is the
CSS communicating at each point?
What this syntax is saying
- Target: input
- Type of input = items with checkboxes
- When checkbox is CHECKED,
- Style LABEL with this CSS rules
How do you write the checkbox specific formatting?
Part 1: remember no spaces
input
[
type
=
“checkbox”
]
What’s part 2 of checkbox formatting?
You’ve specified input,
[, type, =, “checkbox”, and] all with no spaces
:
checked
+
label
What’s the 3rd part of formatting a checkbox?
Add styling details
ex font-weight: bold;
What is nth child selector?
It lets you reach any combination of child elements,
based on any position of parent element.
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.
How do you write the syntax for nth child
for even item numbered item selection?
li:nth-child(even)
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
Can you target odd numbered items in a list?
Yes, you can
you would use the (odd)
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
Can you target a specific list item using nth-child?
Yes, it’s possible to target a specific number in a list
What CSS syntax do you use to specify a
specific numbered item within a list?
li: nth-child(3) {
property: value;
}
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.
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)
What value does n have?
1
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
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;
}
What is skip pattern selection?
Give a starting point, then an interval for
skipping to select and apply CSS styling
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
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.
What’s the simplified way to specify styling of every 3rd item?
li: nth-child(3n) {
background: green;
color: white;
}
What is the syntax for the nth-child when the
skip pattern is set to 3n simplified?
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
What is the syntax for a negative n value?
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.
Do nested items affect :nth-of-type?
No, :nth-of-type can handle interruptions
and different types of elements.
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:
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.
What’s the syntax to write :nth-of-type,
as seen in the prior example?
div: nth-of-type(4) {
property: value;
}
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.
How do you write the syntax for a :nth-last-of-type?
Why do we use nth-child, nth-of-type or :nth-of-last-type?
To help get around constraints in code due to CMS
What is the root element selector?
It targets the highest level HTML element
What does this CSS snippet do with the root element?
:root
applies styling
How do you write the syntax for :root?
Why would you use :root over HTML selector?
Root has higher specificity.
Can :root be used with other languages?
:root can be used with SVG and other languages
What does :root do?
Root targets top most element
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.
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.
What is the syntax to write a :target class?
What is target by ID?
It applies styling to a specific specified ID.
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.
In this example of style by ID, how is the ID being specified?
With the # symbol
After specifying the ID name, how is the target written in the syntax?
:target with no spaces between
What’s the full syntax of target by ID?
ID, target, css, & curly brackets
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.
What is a NOT selector?
It selects everything but one item from a group.
Helps with exclusion of an item from formatting
What element is being excluded from this :not selector?
It’s styling all divs, excluding div a, from styling.
How does it know which div to exclude?
It’s specified by the ID, using a # symbol.
What is the syntax to write a not selector?
How do you specify that it should style
every element in a group except a button?
Specify type
Then submit button
What’s the syntax to write a submit button with :not selector?
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
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).
How do you separate the element from the not selector?
: symbol
What goes into the parenthesis for the not selector?
(:first-child)
Do you need any punctuation after the parenthesis?
No
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)
What does the pseudo element of :first-line do?
It applies styling to the first line of text within a paragraph.
Does :first-line apply formatting to the first sentence?
No, just the first line of text.
What separates the class from the pseudo element in the syntax?
: colon
What’s the full syntax for writing for
this pseudo element of :first-line?
Why would you use the first-letter pseudo element?
To create drop letter effect, use the first-letter pseudo element.
How do you target the class?
Use a . period to specify class
How do you specify the :first-letter pseudo class?
:first-letter
What’s the full syntax for the :first-letter pseudo element?
Can you use :: for pseudo elements?
Yes, the browser will interpret :: with pseudo elements.
Does a pseudo element appear in HTML?
No, pseudo elements appears in the CSS.
What does the before pseudo element do?
It adds an element before the HTML, straight from the CSS.
Why would you use the ::before pseudo element?
To have more styling and design options
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.
What’s the full syntax for the ::before pseudo element example?
Can you apply an element after another element?
Yes, using the pseudo element ::after
In this ::after pseudo element example, is the image being applied before or after the text in HTML?
After
How do you select the class?
.jpg
. indicates class
jpg class name
What’s the syntax for the ::after pseudo element?
::after
What’s the full syntax for the ::after example?
What does this combination of before and after do?
It adds a red circle before and after a
headline element from the CSS.
How do you specify the before and after element?
use ::
::before
::after
For DRY code, how do you condense yet separate?
Use the same code, to condense
Use commas, to separate elements
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.
How is the title retrieved using the attr function?
content:attr(title);
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.
What’s the logic behind this code with attr function?
3 steps
How this code works
- First it targets the class | .d-loads
- Second the descendent | a::after
- Third the titles | content:attr(title)
