10 Introducing CSS and Selectors Flashcards
What are the 3 parts to a CSS rule?
selector and declaration
Select element
define how it should be styled
A declaration contains a property and a value
So you basically select an element, you select a property to change, then you set the value.
Use a css style sheet
<link rel=”stylesheet” href=”” type=”text/css” />
What is the format of the ‘type’ attribute in a link tag?
It's a mimetype type/subtype ex: text/css image/apng image/avif
An html page can have multiple stylesheets
t or f
T
create a series of css rules for a page (not linked, not inline)
<style type=”text/css”>
h1 {color:red;}
p {color:blue;}
</style>
create an inline css rule
< p style=”color:red; more”>
Do a universal selector (all elements on page)
- { }
Select by element type
Select multiple elements by types
h3 { }
h1, h2, h3 { }
elementtype {}
Select a class
.classname {}
Select a class within a certain element type
h1. classname {}
elementtype. classname {}
select an id
idname {}
select an id within a certain element type
h1#idname {}
elementtype#idname {}
select an id within a certain class and element type
h1#idname.classname {}
or
h1.classname#idname
order doesn’t matter
select target elements that are DIRECT children of another
parent>child
no spaces
Targeting children works with other chained elements
t or f
ex:
p#b>span.c {
color: red;
}
T
Target all direct children of another element
div>*
What happens with this code?
<style>
div#b>div.c {
color: red;
}
</style>
<div id="b">
fsad
<div class="a">
afds
<div class="c">
afds
</div>
</div>
</div>
nothing
> only targets direct children
Target the specific children/grandchildren of the specific element
div#b div.c {
color: red;
}
What style is changed
<style type=”text/css”>
div#a div#b>div {
color: red;
}
</style>
<div id="a">
asdfasfd
<div>
asdfasfd
<div id="b">
asdfasfd
<div>
asdfasfd
</div>
</div>
</div>
</div>
the div child of div#b
Target the immediate next sibling only
h1+p {}
Target all next siblings
h1~p {}
Which divs are affected by the style?
div#b+div {
color: red;
}
<divid="a">
aaa
</div>
<div id="b">
aaa
</div>
<div id="c">
aaa
</div>
<div id="d">
aaa
</div>
<divid="e">
aaa
</div>c
What happens if two styles define the same element?
if two have have the same precedence, whichever was process most recently is used.
Which of these specificty rules are true h1 is more specific than * p is more specific than p b p#intro is more specific than p class is more specific than id
t
F
t
F
Force a rule to take precedence
!important
after the property:
p b {
color: blue !important;}
Are colour properties inherited?
yes
Are background colour and border properties inhereted?
no
t or f
Elements can have multiple ids
A unique ID can only be in 1 element
Elements can have multiple classes A unique class can only be in 1 element
False, 1 id per element,
True, 1 element per id
True, multiple classes per element,
False, many elements per class
Does the order of property values in a CSS rule matter?
box-shadow: #777777 50px 50px 50px
vs
box-shadow: 50px 50px 50px #777777
?
No
but you can’t interrupt the 50px 50px 50px
Write this in a simpler way:
.read {
color: white;
background-color: black;
/* several unique declarations */
}
.unread {
color: white;
background-color: black;
/* several unique declarations */
}
.read,
.unread {
color: white;
background-color: black;
}
.read {
/* several unique declarations */
}
.unread {
/* several unique declarations */
}
add multiple classes to the same element
class=”class1 class2”
use a space
select an element only if it has 2 specific classes
.class1.class2
What is a type selector
an element selector
Can you chain type selector
divdiv
no
You can select divs that are children of other divs
but an element cannot be a div and a div. Doesn’t make sense
When should you use the ID selector
Sparingly
Only when you really need to select only one of something.
What is selected
<!– index.html –>
<div class="ancestor"> <!-- A -->
<div class="contents"> <!-- B -->
<div class="contents"> <!-- C -->
</div>
</div>
</div>
<div class=”contents”></div> <!– D –>
WITH
/* styles.css */
.ancestor .contents {
/* some declarations */
}
B
not C
because the space only selects direct children
Does this selector work?
.one .two .three .four
yes
but don’t do it in most cases
Which is more specific:
/* rule 1 */
.class.second-class {
font-size: 12px;
}
/* rule 2 */
.class .second-class {
font-size: 24px;
}
same
both involve 2 classes.
combinator don’t add specificity
Which is more specific:
/* rule 1 */
#subsection .list {
background-color: yellow;
color: blue;
}
/* rule 2 */
#subsection .main .list {
color: red;
}
rule 2 because it has more classes
Name what the following descendant combinators do
- ’ ‘ (just a space)
- >
- +
- ~
descendant combinator(space) (all descendants)
child combinator(>) (all direct children)
forward adjacent sibling combinator(+)
general forward sibling combinator(~)
How do you calculate a value in CSS?
calc( )
How do specificity numbers work? like 0,0,0,0
They go:
inline style attribute, ID, class/pseudoclass attribute, elements
Whichever number is bigger has greater specificity
In otherwords: If the element has inline styling, that automatically1 wins (1,0,0,0 points) For each ID value, apply 0,1,0,0 points For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points For each element reference, apply 0,0,0,1 point
Select an element if that element is the first, last, or nth child, or nth from the end
\:last-child \:first-child \:nth-child(number) \:nth-child(3n) for every third element (starts from 0) (can do 'even' or 'odd') \:nth-last-child
select the element with no parents
usuaslly the HTML tag
:root
Select elements with no children
Select elements that don’t have an siblings
:empty
:only-child
What is a pseudo-element and a pseudo class
A pseudo-class gives a different way to target elements in our HTML
A pseudo-element gives us a way to target something that isn’t usually targettable.
Target bullet points or numbers
::marker
Target first letter or first line
::first-letter
::first-line
Target highlighting (when you make a selection with the mouse)
::selection
Target “before” or “after” an element
::before
::after
Select an element’s attribute
[attribute] - This general selector will select anything where the given attribute exists. Its value doesn’t matter.
selector[attribute] - Optionally we can combine our attribute selectors with other types of selectors, such as class or element selectors.
[attribute=”value”] - To get really specific, we can use = to match a specific attribute with a specific value.
Select the first element of a certain type
Select the nth element of a certain type
select the last element of certain type
:first-of-type
:nth-of-type
:last-of-type
Select every 2nd element, starting from the 3rd
:nth-of-type(2n+3)
it starts from the element of the +. the first ‘n’ is 0
Target the only element of its type
:only-of-type
/* Selects each <p>, but only if it is the */
/* only </p><p> element inside its parent */
p:only-of-type {
background-color: lime;
}</p>
pseudoclass selector select empty elements
:empty
Select “not” of an element
:not(x)
Select elements attributes that begin with certain letters
Select elements attributes that end with certain letters
Select elements attributes that contain certain letters
[attribute^="swim"] will get "swimwear" and "swimming" [attribute$="ing"] [attribute*="wear"] will get swimwear and wearing
