Green Cute Illustrative City Quiz Game Presentation

CSS COMBINATORS
B Y: M A R I A N N E C
HIPE
WHAT ARE CSS COMBINATORS?
A COMBINATOR IS SOMETHING THAT EXPLAINS
THE RELATIONSHIP BETWEEN THE SELECTORS.
COMBINATORS ARE USED IN VARIOUS WAYS IN FUNCTIONAL PROGRAMMING.

ONE OF THE MOST COMMON USES IS IN FUNCTION COMPOSITION, WHERE
TWO OR MORE FUNCTIONS ARE COMBINED TO CREATE A NEW FUNCTION.
THIS IS OFTEN USED TO CREATE MORE COMPLEX FUNCTIONS FROM SIMPLER
ONES, REDUCING CODE DUPLICATION AND IMPROVING READABILITY.
COMBINATORS DEFINE THE RELATIONSHIP
BETWEEN THE SELECTORS.
A CSS SELECTOR CAN CONTAIN MORE
THAN ONE SIMPLE SELECTOR. BETWEEN THE
SIMPLE SELECTORS, WE CAN INCLUDE A
COMBINATOR.
THERE ARE FOUR DIFFERENT COMBINATORS IN
CSS:
• DESCENDANT SELECTOR (SPACE)

• CHILD SELECTOR (>)
• ADJACENT SIBLING SELECTOR (+)
• GENERAL SIBLING SELECTOR (~)
1.DESCENDANT SELECTOR (SPACE)
THE DESCENDANT COMBINATOR TYPICALLY REPRESENTED BY A

SINGLE SPACE (" "), ALLOWS US TO TARGET AN ELEMENT THAT IS A
DESCENDANT OF AN ELEMENT TYPE.IT COMBINES TWO
SELECTORS SUCH THAT ELEMENTS MATCHED BY THE SECOND
SELECTOR ARE SELECTED IF THEY HAVE AN ANCESTOR ELEMENT
MATCHING THE FIRST SELECTOR.
THE FOLLOWING EXAMPLE SELECTS ALL <P> ELEMENTS INSIDE <DIV>

ELEMENTS:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
DIV P {
BACKGROUND-COLOR: YELLOW;
}
</STYLE>
</HEAD>
<BODY>
<H2>DESCENDANT SELECTOR</H2>
<P>THE DESCENDANT SELECTOR MATCHES ALL ELEMENTS THAT ARE DESCENDANTS OF A SPECIFIED ELEMENT.</P>
<DIV>
<P>PARAGRAPH 1 IN THE DIV.</P>
<SECTION><P>PARAGRAPH 3 IN THE DIV.</P></SECTION>
</DIV>
<P>PARAGRAPH 4. NOT IN A DIV.</P>

</BODY>
</HTML>
2.CHILD SELECTOR (>)
THE CHILD SELECTOR SELECTS ALL ELEMENTS THAT ARE THE
CHILDREN OF A SPECIFIED ELEMENT.
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.
THE FOLLOWING EXAMPLE SELECTS ALL <P>

ELEMENTS THAT ARE CHILDREN OF A <DIV> ELEMENT:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
DIV > P {
}
</STYLE>
</HEAD>
<BODY>
<H2>CHILD SELECTOR</H2>
<P>THE CHILD SELECTOR (>) SELECTS ALL ELEMENTS THAT ARE THE CHILDREN OF A SPECIFIED ELEMENT.</P>
<DIV>
<SECTION>

<P>PARAGRAPH 3 IN THE DIV (INSIDE A SECTION ELEMENT).</P>
</SECTION>
</DIV>

</BODY>
3.ADJACENT SIBLING SELECTOR (+)
THE ADJACENT SIBLING SELECTOR IS USED TO SELECT AN ELEMENT
THAT IS DIRECTLY AFTER ANOTHER SPECIFIC ELEMENT.
SIBLING ELEMENTS MUST HAVE THE SAME PARENT ELEMENT, AND

"ADJACENT" MEANS "IMMEDIATELY FOLLOWING".
THE FOLLOWING EXAMPLE SELECTS THE FIRST <P> ELEMENT THAT ARE PLACED
IMMEDIATELY AFTER <DIV> ELEMENTS:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
DIV + P {
}
</STYLE>
</HEAD>
<BODY>
<H2>ADJACENT SIBLING SELECTOR</H2>
<P>THE + SELECTOR IS USED TO SELECT AN ELEMENT THAT IS DIRECTLY AFTER ANOTHER SPECIFIC ELEMENT.</P>
<P>THE FOLLOWING EXAMPLE SELECTS THE FIRST P ELEMENT THAT ARE PLACED IMMEDIATELY AFTER DIV ELEMENTS:</P>
<DIV>
</DIV>
<P>PARAGRAPH 3. AFTER A DIV.</P>

<DIV>
</DIV>

</BODY>
4.GENERAL SIBLING SELECTOR (~)
THE GENERAL SIBLING SELECTOR SELECTS ALL

ELEMENTS THAT ARE NEXT SIBLINGS OF A SPECIFIED
ELEMENT.
THE FOLLOWING EXAMPLE SELECTS ALL <P> ELEMENTS THAT ARE

NEXT SIBLINGS OF <DIV> ELEMENTS:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
DIV ~ P {
}
</STYLE>
</HEAD>
<BODY>
<H2>GENERAL SIBLING SELECTOR</H2>
<P>THE GENERAL SIBLING SELECTOR (~) SELECTS ALL ELEMENTS THAT ARE NEXT SIBLINGS OF A SPECIFIED ELEMENT.</P>
<P>PARAGRAPH 1.</P>
<DIV>
<P>PARAGRAPH 2.</P>
</DIV>
<P>PARAGRAPH 3.</P>
<CODE>SOME CODE.</CODE>
<P>PARAGRAPH 4.</P>
</BODY>
</HTML>
ALL CSS COMBINATOR SELECTORS:
Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
Selects all <p> elements where the parent is a

element>element div > p
<div> element
Selects the first <p> element that are placed

element+element div + p
immediately after <div> elements
Selects every <ul> element that are preceded by

element1~element2 p ~ ul
a <p> element
EVALUATION:
BRING OUT A PEN AND 1/4 SHEET

OF PAPER
1-4.Name the 4 different combinators in CSS
5.A descendant selector is used to select an element that

is directly after another specific element.(True/false)?
6.Sibling elements must have the same parent element.

(True/false)?
7.A ADJACENT SIBLING SELECTOR IS
PRESENTED BY WHAT CHARACTER?
A. A single space
B. (>)
C. (+)
D. (~)
8.IT IS A TYPE OF COMBINATOR THAT
MATCHES ALL ELEMENTS THAT ARE
DESCENDANTS OF A SPECIFIED
ELEMENT.
A. Descendant Selector
B. Child Selector
C. Adjacent Sibling Selector
9. IT IS SOMETHING THAT EXPLAINS
THE RELATIONSHIP BETWEEN THE
SELECTORS.
A. Combinations
B. Comprehension
C. Combinators
D. Conversation
10. WHICH IS THE CORRECT DEFINITION OF A
“CHILD SELECTOR?
A. Selects all elements that are the children of a specified
element.
B. Matches all elements that are descendants of a specified
element.
C. Selects an element that is directly after another specific
element.
D. Selects all elements that are next siblings of a specified
element.

Green Cute Illustrative City Quiz Game Presentation

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Green Cute Illustrative City Quiz Game Presentation

Uploaded by

Copyright:

Available Formats

CSS COMBINATORS

COMBINATORS ARE USED IN VARIOUS WAYS IN FUNCTIONAL PROGRAMMING.

• DESCENDANT SELECTOR (SPACE)

THE DESCENDANT COMBINATOR TYPICALLY REPRESENTED BY A

THE FOLLOWING EXAMPLE SELECTS ALL <P> ELEMENTS INSIDE <DIV>

<P>PARAGRAPH 4. NOT IN A DIV.</P>

IT IS PLACED BETWEEN TWO CSS SELECTORS. IT MATCHES ONLY

THE FOLLOWING EXAMPLE SELECTS ALL <P>

<P>PARAGRAPH 5. NOT IN A DIV.</P>

SIBLING ELEMENTS MUST HAVE THE SAME PARENT ELEMENT, AND

<H2>ADJACENT SIBLING SELECTOR</H2>

<P>PARAGRAPH 3. AFTER A DIV.</P>

<P>PARAGRAPH 7. AFTER A DIV.</P>

THE GENERAL SIBLING SELECTOR SELECTS ALL

THE FOLLOWING EXAMPLE SELECTS ALL <P> ELEMENTS THAT ARE

<H2>GENERAL SIBLING SELECTOR</H2>

Selects all <p> elements where the parent is a

Selects the first <p> element that are placed

Selects every <ul> element that are preceded by

BRING OUT A PEN AND 1/4 SHEET

5.A descendant selector is used to select an element that

6.Sibling elements must have the same parent element.

You might also like