Selectors Flashcards
(31 cards)
Explain CSS selector syntax?
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Universal selector(Basic selectors)
The CSS universal selector (*) matches elements of any type.
/* Selects all elements */
* {
color: green;
}
* [lang^=en] {
color: green;
}
*.warning {
color: red;
}
Type selector(Basic selectors)
The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.
/* All <a> elements. */
a {
color: red;
}</a>
Class selector(Basic selectors)
The CSS class selector matches elements based on the contents of their class attribute.
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
ID selector(Basic selectors)
The CSS ID selector matches an element based on the value of the element’s id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.
In HTML5, the id attribute must be unique, contain at least one character and shouldn’t contain space characters. There aren’t any other restrictions.
#identified {
background-color: skyblue;
}
<div>This div has a special ID on it!</div>
<div>This is just a regular div.</div>
(Data)Attribute selector(Basic selectors)
The CSS attribute selector matches elements based on the presence or value of a given attribute.
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* </a><a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* </a><a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}</a>
Selector list(Grouping selectors)
The ( , )-comma is a grouping method, it selects all the matching nodes.
h1#main, h2.sub, h3, .someClass, #anID {
color: Maroon;
}
Descendant combinator(Combinators)
The descendant combinator — represented by a single space ( ) character — The descendant selector matches all elements that are descendants of a specified element.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
Child combinator(Combinators)
> (greater-than sign) The child combinator (>) is placed between two CSS selectors. It matches only to the second selector that is the direct children of elements matched by the first.
/* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}
General sibling combinator(Combinators)
The ~(tilde/squiggle/twiddle) General Sibling Combinator selects elements at the same hierarchy level.
/* Paragraphs that are siblings of and
next to any image */
img ~ p {
color: red;
}
Adjacent sibling combinator(Combinators)
The + combinator matches the second element only if it immediately follows the first element.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
Column combinator(Combinators)
The || combinator selects nodes which belong to a column. Syntax: A || B Example: col || td will match all elements that belong to the scope of the .
Pseudo classes(Pseudo)
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Can be: Location pseudo-classes Linguistic pseudo-classes action pseudo-classes The input pseudo-classes
popular: \:hover \:active \:focus \:default \:checked \:nth-child \:nth-of-type
Pseudo elements(Pseudo)
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
examples: \::after (:after) \::before (:before) \::first-letter (:first-letter) \::first-line (:first-line)
:not()(Pseudo)
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
/* Selects any element that is NOT a paragraph */
\:not(p) {
color: blue;
}
What is the purpose of the Role Attribute?
Use cases for a role attribute for HTML5, include:
accessibility,
device adaptation,
server-side processing, and
complex data description.
for example:
role=”logo” or type=”logo”
role=”layout” or type=”layout”
Explain CSS selector that applies to elements with two classes
ID and Class Selector: you can target elements by a combination of ID and class.
Double Class Selector: Target an element that has all of multiple classes but not limited to two.
Multiples: We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.
Data Attributes
HTML elements can have attributes on them that are used for anything from accessibility information to stylistic control.
To be able to make up your own HTML attributes and put your own information inside them.
< article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ... < /article>
Is there a Parent Selector?
There is currently no way to select the parent of an element in CSS.
Previous Sibling Selector
Either parent selectors or previous siblings selectors are simply not a thing.
:nth-of-type()
The :nth-of-type() CSS pseudo-class matches elements of a given type (tag name), based on their position among a group of siblings. Can be used with class.
< div> < div>This element isn't counted. < p>1st paragraph. < p class="fancy">2nd paragraph. < div>This element isn't counted. < p class="fancy">3rd paragraph. < p>4th paragraph. < /div>
/* Odd paragraphs */
p:nth-of-type(2n+1) {
color: red;
}
/* Even paragraphs */
p:nth-of-type(2n) {
color: blue;
}
/* First paragraph */
p:nth-of-type(1) {
font-weight: bold;
}
/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */
p.fancy:nth-of-type(2n+1) {
text-decoration: underline;
}
:first-child
The :first-child CSS pseudo-class represents the first element among a group of sibling elements. Can be used with classes.
< div>
< p>This text is selected!
< p>This text isn’t selected.
< div>
< h2>This text isn’t selected: it’s not a p.
< p>This text isn’t selected.
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
:last-child
The :last-child CSS pseudo-class represents the last element among a group of sibling elements. Can be used with classes.
< div>
< p>This text isn’t selected.
< p>This text is selected!
< /div>
< p>This text isn’t selected.
< h2>This text isn’t selected: it’s not a p.
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
Can you nest classes in CSS?
Just like in HTML where you can have elements nested inside other elements, the same can be done in CSS. There are cases where you might want to style elements differently depending on what they are nested inside of.
