p > a {
declarations;
}
Used to style elements that are direct children of the parent element. Dont confuse this widtha descendent selector, which includes children, grandchildren, etc.
a[href^="https"] {
| background-image: url(padlock_icon.png);
| background-repeat: no-repeat;
background-position: 0 2px;
padding-left: 20px
used to style an element based on the beginning characters of one of its Attributes.
.name1.name2 {
padding: 20px;
background-color: aqua;
font-family: verdana;
}
multiple html elements with class or a name associated with it can be styled together in one css box.
:root {
--main-color: hotpink;
--pane-padding: 5px 42px
}
Can be used to declare css variables within the html code
::first-letter {
Font-family: monospace;
font-size: x-large;
}
style the first letter of an
element
#firstname {
background-color: yellow;
}
selects the element with id="firstname"
* {
margin: 0; padding: 0; border: 0; box-sizing: border-box;
}
selects all elements or is a reset rule
:hover {
background-color: black;
color: white;
}
putting the cursor over the element can change how it looks, for example a link can grow bigger and change color to give the user feedback.
div {
border 2px solid black;
padding: 25px;
width: 100px;
}
selects all elements with the div tag and can be customized.
:link {
color green
}
style links so the user can see what has been recently visited.
:fullscreen {
css declarations;
}
fullscreen selector is used to select all elements that is in full screen mode.