Selectors Flashcards
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.
Wildcard Selectors (*, ^ and $) in CSS for classes
Wildcard selector is used to select multiple elements in one time. It selects similar type of class name or attribute and use CSS property.
Why do browser match CSS selectors from right to left
You have to start walking the DOM, looking for nodes that might match it. Just discovering that there’s nothing matching that leftmost part might take a while. So browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly
How can i make a same class name unique to different pages?
The best practice is to add some relevant class in body tag and then use like this:
< div class="top_container"> < /div>
now you can use css like:
.home .top_container{}
.about .top_container{}
::after (:after)
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
< p class=”boring-text”>Here is some plain old boring text.
< p>Here is some normal text that is neither boring nor exciting.
< p class=”exciting-text”>Contributing to MDN is easy and fun.
.exciting-text::after {
content: “
:not
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not a selector. This selector is used to set the style to every element that is not specified by the given selector. Since it is used to prevent specific items from a list of selected items.
What does * indicate in CSS?
This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means “all elements” (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.
Is there a way to exclude elements with a particular default styling from a CSS selector?
body *:not([style="hidden"]) {
/* your style rules */
}. would apply your style rules to all elements in your tag, except elements with a style="hidden" attribute. For example it would only apply to the h1 here:
< h1>Title
< div style=””>
< p style=””>
. It’s worth noting that style=”hidden” isn’t a valid style attribute and it won’t do anything if you add it to your HTML.
