SELECTOR
four types of selector in CSS:
matches all elements that r descendants of a specified element
div p { insert elements }
every < p> in element get affected. (its a children)
selects all elements that r children of a spcecified element.
div > p { insert element }
in every < p> in element, if one got < section>, it doesn't get affected. (its arleady a grandchildren, not children)
selects all elements that r adjacent (immediately following) siblings of a spcecified element.
div + p { insert element }
the paragraph after < div> elements are selected (?)
matches all sibling selector of a spcecified element.
div ~ p { insert element }
the paragraph after < any kinds of> elements are selected (?)
CSS Pseudo-classes
to define a special state of an element.
Style an element when a user mouses over it, Style visited and unvisited links differently, when it gets focus
selector:Pseudo-class { property : value;}
examples :
matches a specified element that is the first child of another element.
p:first-child {insert element}
< p> first text < /p> (gets affected)
< p> second text < /p>
The :lang pseudo-class allows you to define special rules for different languages.
p:lang(no) {insert element}
< p> this text is a < q lang="no"> first texts < /q> < /p> (gets affected) ===> this text is a "first tests"
< p> this text is a second texts < /p>
CSS Pseudo-elements
is used to style specified parts of an element.
::first-line
the first line of a paragraph will only be affected.
the only proplerties that can be applied:
::first-letter
the first letter of a paragraph will only be affected.
the only proplerties that can be applied:
Pseudo-elements can be combined with CSS Classes
::before
to insert some content before the content of an element.
::after
used to insert some content after the content of an element
::selection { color, background, cursor, and outline }
The ::selection pseudo-element matches the portion of an element that is selected by a user.
CSS Attribute Selectors
It is possible to style HTML elements that have specific attributes or attribute values.
[attribute] selector used to select elements with a specified attribute.
a [target] { insert element }
< a href="https://insertlink.com" target="_blank"> insertlink.com < /a>
used to select elements with a specified attribute and value, in this case, with the target value "_blank".
[attribute="value"]
[attribute~=value]
< p title="value"> insert paragrph or img here :9 < /p>
used to select elements with an attribute value containing a specified word.
[attribute|=value]
< p title="value-header/text"> insert paragrph or img here :9 < /p>
used to select elements with an attribute value containing a specified word.
The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!
[attribute^=value]
< p title="value-header/text"> insert paragrph or img here :9 < /p>
can be used on anything as long as it got the word of the value.
[attribute$=value]
< p title="value-header/text"> insert paragrph or img here :9 < /p>
can be used on anything (p and div) as long as it got the word of the value.
[attribute*=value]
< p title="value-header/text"> insert paragrph or img here :9 < /p>
can be used on anything as long as it got the word of the value.
CSS Selector
CSS Media Queries
what the hell is that??
@media rule, introduced in CSS2, but it got shut down apparently?
media queries in CSS3 extended the CSS2 media types idea
a media query consists of a media type and can contain one or more expressions, which resolve to either true or false.
@media screen*type* and*logic syntax* (min-width: 480px)*expression/elements*
types in @media:
i got off-track right here bcs i accidentally deleted the file explorer.exe in my task manager lmaooooo