Advance Lesson 6

Create and style the collapsible and the accordion

lesson 5 lesson 7

Notes:

CSS Notes:

[attribute=value] selector:

  • The [attribute=value] selector is used to select elements with the specified attribute and value.

:checked selector:

  • The :checked selector matches every checked element.

~ selector:

  • The ~ selector matches occurrences of second element that are preceded by first element.

+ selector:

  • The + selector is used to select elements that is placed immediately after (not inside) the first specified element.

:first-child selector:

  • The :first-child selector matches every element that is the first child of its parent.

:last-child selector:

  • The :last-child selector matches every element that is the last child of its parent.

!important rule:

  • The !important rule used to make sure that the style will work.

overflow property:

  • The overflow property specifies what happens if content overflows an element's box.
    Syntax overflow: visible | hidden | scroll | auto;

cursor property:

  • The cursor property specifies the type of cursor to be displayed when pointing on an element.
    Syntax cursor: value;

user-select property:

  • The user-select property specifies whether the text of an element can be selected.
    Syntax user-select: auto | none | text | all;