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
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 the CSS for a disable state?
:disabled followed by …?
:disabled class
Open curly brace
background styling
semi colon
Ending curly brace
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;
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)
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
What CSS syntax do you use to specify a
specific numbered item within a list?
li: nth-child(3) {
property: value;
}
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;
}
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?
What is the syntax for a negative n value?
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?
What does this CSS snippet do with the root element?
:root
applies styling
How do you write the syntax for :root?
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?
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 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’s the full syntax for writing for
this pseudo element of :first-line?
How do you target the class?
Use a . period to specify class
What’s the full syntax for the :first-letter pseudo element?
What does the before pseudo element do?
It adds an element before the HTML, straight from the CSS.
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?
In this ::after pseudo element example, is the image being applied before or after the text in HTML?
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
How is the title retrieved using the attr function?
content:attr(title);
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)
