selectors Flashcards
How do you select all html elements of the same type (e.g. span)?
The css selector is just the tag’s name. e.g.
span{
}
How do you select all elements on a page?
Star (*) selector e.g.:
*{
color:#aa2132;
}
How can you select all child elements of an HTML element?
Star selector after the tag selector. eg:
article *{
}
What is the * selector called?
Universal selector
Which elements are selected by
<code>
.some_name{</code>
}
</code>
?
All elements with attribute class=”some_name”
eg <div class="some_name"></div>
How do you select only those elements that have two classes applied? e.g.
<div></div>
?
concatenate the two class selectors e.g.
.note.warning{
}
How do you select elements by their id?
e.g. <div id="navigation"/>?
using #, e.g.
#navigation{
}
Which elements does a[alt] select?
all <a> elements with an alt attribute set, regardless of alt’s value, e.g. <a>Link</a></a>
What does [attr=value] select? e.g.
img[href=”https://prettypics.com/notanothercatpic.jpg”]?
Selects all elements that have the attribute “attr” and the attribute has the value “value”
What does [attr~=val] select? e.g. p[class~=”special”]?
Selects those attr’s that EITHER have EXACTLY the value “val”, OR contain val among their space separated possible list of values, e.g.
<p></p>
What does [attr|=value] select? e.g. div[lang|=”zh”]
it selects all elements with an attr attribute whose value is EXACTLY “value” OR begins with “value” immediately followed by a HYPHEN, i.e.
<div></div>
What does [attr^=value] select ?
Matches an element with an attribute(attr) whose value BEGINS with “value”
What does [attr$=value] select?
Matches elements with an attribute (attr) whose value ENDS with “value”
what does [attr*=value] select?
Matches those elements with an attribute (attr) whose value CONTAINS value
In attribute selectors, what does the “i” stand for? e.g. li[class^=”a” i]?
It selects all elements (li) with an attribute (class) that begins with the specified string (the letter a) but case INSENSITIVELY
What is a pseudo-class?
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.
What is :first-child?
It is a pseudo-class which selects the first child of the element selected. e.g
article p:first-child{
}
selects the first child of type paragraph
within an article tag
what does the :invalid pseudo-class selects?
All the elements that have failed to validate
What do pseudo classes :link, :visited :hover, and :focus select?
These are dynamic pseudo classes which are applied when a user clicks a link, after the user has visited the link, while the last two apply if the user moves the cursor over any element, or when the user shifts focus to the element by clicking or using keyboard controls respectively
What are ::first-line, ::before, ::after?
They are pseudo-elements. They act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.
Pseudo-elements start with a double colon ::. ::before is an example of a pseudo-element.
what is “>” in css selectors?
It is placed between two css selectors.
It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendant elements further down the hierarchy don’t match.
What does + between two CSS selectors select?
+ is the adjacent sibling combinator. It matches only those elements matched by the second selector that are the next sibling element of the first selector. For example, to select all <img></img> elements that are immediately preceded by a <p> element: p+img
