Selectors

Question 1

Explain CSS selector syntax?

Answer 1

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.

Question 2

Universal selector(Basic selectors)

Answer 2

The CSS universal selector (*) matches elements of any type.

/* Selects all elements */
* {
  color: green;
}
* [lang^=en] {
  color: green;
}

*.warning {
color: red;
}

Question 3

Type selector(Basic selectors)

Answer 3

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>

Question 4

Class selector(Basic selectors)

Answer 4

The CSS class selector matches elements based on the contents of their class attribute.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

Question 5

ID selector(Basic selectors)

Answer 5

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>

Question 6

(Data)Attribute selector(Basic selectors)

Answer 6

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>

Question 7

Selector list(Grouping selectors)

Answer 7

The ( , )-comma is a grouping method, it selects all the matching nodes.

h1#main, h2.sub, h3, .someClass, #anID {
color: Maroon;
}

Question 8

Descendant combinator(Combinators)

Answer 8

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;
}

Question 9

Child combinator(Combinators)

Answer 9

> (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;
}

Question 10

General sibling combinator(Combinators)

Answer 10

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;
}

Question 11

Adjacent sibling combinator(Combinators)

Answer 11

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;
}

Question 12

Column combinator(Combinators)

Answer 12

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 .

Question 13

Pseudo classes(Pseudo)

Answer 13

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

Question 14

Pseudo elements(Pseudo)

Answer 14

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)

Question 15

:not()(Pseudo)

Answer 15

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;
}

Question 16

What is the purpose of the Role Attribute?

Answer 16

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”

Question 17

Explain CSS selector that applies to elements with two classes

Answer 17

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.

Question 18

Data Attributes

Answer 18

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>

Question 19

Is there a Parent Selector?

Answer 19

There is currently no way to select the parent of an element in CSS.

Question 20

Previous Sibling Selector

Answer 20

Either parent selectors or previous siblings selectors are simply not a thing.

Question 21

:nth-of-type()

Answer 21

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;
}

Question 22

:first-child

Answer 22

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;
}

Question 23

:last-child

Answer 23

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;
}

Question 24

Can you nest classes in CSS?

Answer 24

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.

Question 25

Wildcard Selectors (*, ^ and $) in CSS for classes

Answer 25

Wildcard selector is used to select multiple elements in one time. It selects similar type of class name or attribute and use CSS property.

Question 26

Why do browser match CSS selectors from right to left

Answer 26

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

Question 27

How can i make a same class name unique to different pages?

Answer 27

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{}

Question 28

::after (:after)

Answer 28

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: “

Question 29

:not

Answer 29

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.

Question 30

What does * indicate in CSS?

Answer 30

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.

Question 31

Is there a way to exclude elements with a particular default styling from a CSS selector?

Answer 31

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.