- * all elements
- div all div tags
- div, p all div tags and p tags
- div p all p tags inside div tags
- div >p all p tags inside div at first level
- div + p all p tags immediately after div ( at parallel, not child or parent )
- div ~ p all p tags preceded by div ( at parallel, not child or parent )
- .classname all elements (e.g. p, div, etc.) having class="classname"
- div.classname all div having class="classname"
- #idname one div having id="idname" (NOTE: In one html page only one id can exist, simultaneously.)
- div#idname one div having id="idname"
- #idname * all elements inside id="idname"
CSS selectors are used to select HTML elements and apply styles to them. Here are some common examples of CSS selectors:
- Tag Selector: Selects all elements with a specific tag name. For example, to apply a style to all paragraph elements, you can use the following syntax:
p {
color``: blue; }
- Class Selector: Selects elements with a specific class attribute. Classes are used to style multiple elements. For example:
.highlight
{
background-color``: yellow; }
- ID Selector: Selects a single element with a specific ID. IDs are unique identifiers that can be used to style a single element. For example:
#header
{
background-color``: green; }
- Descendant Selector: Selects elements that are descendants of another element. For example:
#header
p {
color``: red; }
- Child Selector: Selects elements that are direct children of another element. For example:
#header
> p {
color``: red; }
- Adjacent Sibling Selector: Selects elements that are directly after a specified element. For example:
h1 + p {
color``: blue; }
- Attribute Selector: Selects elements based on their attribute values. For example:
a``[target="_blank"]
{
color``: blue; }
Here are some of the advanced CSS selectors:
- Universal Selector: Selects all elements. For example:
* {
margin``:
0``;
padding``:
0``; }
- Pseudo-class Selector: Selects elements based on their state or position. For example:
a``:hover
{
color``: blue; } p``:first``-child {
font-weight``: bold; }
- Pseudo-element Selector: Selects specific parts of an element. For example:
p``::first-letter
{
font-size``: larger; } p``::before
{
content``:
"Note: "``; }
- Combinators: Allow you to select elements based on their relationship to other elements. For example:
div h1 {
font-size``: larger; } li > a {
font-weight``: bold; }
- Attribute Selector: Selects elements based on their attribute values. For example:
a``[target="_blank"]
{
color``: blue; } input``[type="text"]
{
width``:
200px``; }
- Substring Attribute Selector: Selects elements based on the presence of a substring in an attribute value. For example:
a``[href*="example"]
{
color``: blue; }
- Substring Attribute Selector with Prefix: Selects elements based on the presence of a substring with a specific prefix in an attribute value. For example:
a``[href^="https"]
{
color``: blue; }
- Substring Attribute Selector with Suffix: Selects elements based on the presence of a substring with a specific suffix in an attribute value. For example:
a``[href$=".pdf"]
{
color``: blue; }
- Not Selector: Selects all elements that do not match a specified selector. For example:
:not``(p) {
margin-bottom``:
1em``; }
These advanced selectors allow you to create more complex and specific styles for your HTML elements.
- Class and ID Selectors: Select elements based on their class or ID attribute. For example:
.highlight
{
background-color``: yellow; }
#header
{
background-color``: lightgray; }
- Adjacent Sibling Selector: Selects elements that are directly after another element. For example:
h1 + p {
font-size``: smaller; }
- General Sibling Selector: Selects elements that come after another element. For example:
h1 ~ p {
font-size``: smaller; }
- Child Selector: Selects elements that are children of another element. For example:
ul > li {
list-style-type``: square; }
- Descendant Selector: Selects elements that are descendants (children, grandchildren, etc.) of another element. For example:
div p {
font-size``: smaller; }
- Media Queries: Select elements based on the size and type of the device they are being displayed on. For example:
@media
screen
and
(``max-width``:
600px``) { h1 {
font-size``: smaller; } }
These advanced CSS selectors give you a lot of control over the styles applied to your HTML elements, and help you create responsive, dynamic websites that look great on any device.