sriparthu
CSS Selectors

CSS Selectors

sri parthu's photo
sri parthu
·

8 min read

Table of contents

  • CSS selectors are used to find or select the HTML elements you want to style. There are 5 types.

    • Simple selectors:

      • Simple selectors are used to select elements like HTML elements, classes, IDs, universal, and grouping selectors.

    • Combinator selectors:

      • Combinator selectors are used to select elements based on specific relationships between them.

    • Pseudo-class selectors:

      • Pseudo-class selectors are used to select elements based on a certain state.

    • Pseudo-element selectors:

      • Pseudo-element selectors are used to select and style part of an element.

    • Attribute selectors:

      • Attribute selectors are used to select elements based on an attribute or attribute value.

Simple selectors

HTML Element Selectors:

  • The HTML element selector selects elements based on the element type, like <h1> to <h6>, <p>, <div>, etc.
h1{
    color: red;
    background-color: yellow;
}
p{
    text-align: center;
    color: blue;
}
div{
    border: 3px solid;
    text-decoration: underline;
}

Class Selectors:

  • The class selectors select HTML elements with a specific class attribute. This element can refer to more than one class, and to select this element, we need to specify the class attribute to the HTML element, followed by the class name, which is denoted with a dot (.) character.
<h1 class="head">This is heading</h1>
<p class="para">This is paragraph</p>

.head{
    color: white;
    background-color: black;
}
.para{
    border: 2px solid;
    color: white;
    background-color: blue;
}

ID Selectors:

  • The ID selectors use the id attribute in the HTML element to select a unique, specific element. The ID of the element should be unique within the page, so that . To select an element with a specific ID, we write the id attribute in the HTML element followed by the class name and denoted by a hashtag (#).
<div id="container">
    <h1>This is heading</h1>
    <p>This is another paragraph</p>
</div>

#container{
    border: 3px solid;
    background-color: red;
    color: yellow;
}

Universal Selectors:

  • The universal selector (*) selects all HTML elements on the page.
<div>
    <h1>This is heading</h1>
    <p>This is another paragraph</p>
</div>

*{
    margin: 0;
    padding: 0;
}

Note: Here you can notice the changes when you use universal selectors and non-universal selectors. As a good developer, you need to start writing CSS files with universal selectors.

Grouping Selectors:

  • The grouping selectors select all HTML elements with the same style definitions.

  • The difference between non-grouping and grouping selectors.

Non-grouping selectors

h1{
    text-align: center;
    border: 2px solid;
    background-color: red;
}
p{
    text-align: center;
    border: 2px solid;
    background-color: red;
}

Grouping selectors

h1, p{
    text-align: center;
    border: 2px solid;
    background-color: red;
}

Pseudo-class selectors

  • Pseudo-class selectors are used to select the special state of an element, such as

    • styling the element when a user moves the mouse over it,

    • styling visited and unvisited link colors differently,

    • styling the element when it gets focus, and

    • styling valid, invalid, required, and optional form elements.

Syntax of pseudo-class selectors

selectors:pseudo-class{
    property: value;
}

1 . :hover

  • This :hover applies when you move the mouse over the element. You can apply the style with HTML elements, classes, and IDs.
<h1>This is heading</h1>
<h2 class="head">This is another heading</h2>
<h3 id="heading">This is one more another heading</h3>

/*Hover to HTML element*/
h1:hover{
    color: white;
    background-color: black;
}
/*Hover to Class attribute*/
.head:hover{
    text-align: center;
    color: brown;
    background-color: aqua;
    font-family: cursive;
}
/*Hover to id attribute*/
#heading:hover{
    font-size: xx-large;
    color: aqua;
    background-color: black;
    border: 5px solid green;
}

Not hover the elements

Hover the elements

2 . :active

  • The :active applies when the element begins to be clicked.
<button>Click me!</button>

button:active{
    background-color: chocolate;
    color: white;
}

Not active on the elements

active on the elements

3 . :visited

  • The :visited applies to a link when the user has visited it.
<a href="https://www.google.com/">Click me!</a>

a{
    font-size: xx-large;
}
a:visited{
    color: red;
}

  • The :link applies to the link when the user has not visited it.
<a href="https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://en.wikipedia.org/wiki/Mumbai&ved=2ahUKEwjRwZSm5LCKAxXo1zgGHYxBLkgQFnoECD4QAQ&usg=AOvVaw08bAvqF4_7gZaVBgO1vzaG">Click me mumbai</a>

a{
    font-size: xx-large;
}
a:link{
    color: forestgreen;
}

Note: I think this is enough for the pseudo-class selectors. If you want to learn more about the pseudo-class selector, you can visit the browser and learn. You can use pseudo-class selectors for HTML elements, classes, and IDs.

Pseudo-element selectors:

  • A pseudo-element selector is used to style a specific part of the element, such as

    • Style the first letter or the first line of the element

    • Insert content before or after the element

    • Style the markers of the list items

    • Style the view box behind the dialog box

Syntax of Pseudo-element selector

1 . ::first-line

  • The ::first-line pseudo-element is used to style the first line of the text. This style is applied to the block-level of the element. Following this property

    • font properties

    • color properties

    • background properties

    • word-spacing

    • letter-spacing

    • text-decoration

    • vertical-align

    • text-transform

    • line-height

    • clear

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio maiores exercitationem quis deserunt recusandae, dolore ipsa inventore blanditiis, praesentium tenetur similique laborum? Ea, accusamus sunt suscipit molestiae animi reprehenderit provident qui ab dolor corporis veniam iusto eius aliquid exercitationem ad, voluptate autem quo tempora! Fuga aspernatur velit culpa doloribus, perferendis rerum neque accusamus earum magni quod enim repudiandae quae vel porro placeat odit laborum hic cum illo? Unde veniam, labore exercitationem magni incidunt vero tenetur minima iusto dolor repellendus culpa, cumque vitae molestiae, fugit molestias pariatur. Corporis at reprehenderit perspiciatis, dicta accusamus praesentium eveniet enim atque, deserunt vel asperiores eligendi?</p>

p::first-line{
    color: red;
    font-family: monospace;
    font-weight: bold;
}

2 . ::first-letter

  • The ::first-letter pseudo-element is used to style the first letter of the text. This style is applied to the block level of the element. Following this property

    • font properties

    • color properties

    • background properties

    • margin properties

    • padding properties

    • border properties

    • text-decoration

    • vertical-align (only if "float" is "none")

    • text-transform

    • line-height

    • float

    • clear

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio maiores exercitationem quis deserunt recusandae, dolore ipsa inventore blanditiis, praesentium tenetur similique laborum? Ea, accusamus sunt suscipit molestiae animi reprehenderit provident qui ab dolor corporis veniam iusto eius aliquid exercitationem ad, voluptate autem quo tempora! Fuga aspernatur velit culpa doloribus, perferendis rerum neque accusamus earum magni quod enim repudiandae quae vel porro placeat odit laborum hic cum illo? Unde veniam, labore exercitationem magni incidunt vero tenetur minima iusto dolor repellendus culpa, cumque vitae molestiae, fugit molestias pariatur. Corporis at reprehenderit perspiciatis, dicta accusamus praesentium eveniet enim atque, deserunt vel asperiores eligendi?</p>

p::first-letter{
    color: red;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: xx-large;
}

3 . ::before

  • This ::before pseudo-element is used to add content before the content of the HTML element.
<h1>This is heading</h1>

h1::before {
    content: "";
    display: inline-block;
    background-image: url('https://www.adorama.com/alc/wp-content/uploads/2021/05/bird-wings-flying-feature.gif');
    background-size: cover;
    width: 90px;
    height: 50px;
    margin-right: 10px;
    vertical-align: middle;
}

4 . ::after

  • The ::after pseudo-element is used to add content after the content of the HTML element.
<h1>This is heading</h1>

h1::after{
    content: "";
    background-image: url(https://media1.giphy.com/media/3CCXHZWV6F6O9VQ7FL/giphy.gif?cid=6c09b952hoibgwjjpn4j54ix7vouk0mbvkm9t352mgh59dea&ep=v1_gifs_search&rid=giphy.gif&ct=g);
    background-repeat: no-repeat;
    display: inline-block;
    height: 100px;
    width: 120px;
    background-size: cover;
    margin-left: 10px;
    vertical-align: middle;
}

Note: I think this is enough for the pseudo-element selectors. If you want to learn more about the pseudo-element selector, you can visit the browser and learn. You can use pseudo-element selectors for HTML elements, classes, and IDs.

Combinator selectors:

  • A CSS selector have more than one simple selector. Between the simple selectors, we can include a combinator like:

    • Descendant combinator (space)

    • Child combinator (>)

    • Next sibling combinator (+)

    • Subsequent-sibling combinator (~)

Descendant combinator (space)

  • The descendant combinator matches all elements that are descendants of a specified element which means element inside the element. Here we can use HTML element, class and ID.

  • The following example selects all <p> elements inside <div> elements:

<div>
    <p>This is paragraph</p>
    <p>This is paragraph</p>
    <p>This is paragraph</p>
</div>
    <p>This is paragraph</p>

div p{
    color: red;
}

Child Combinator (>):

  • The child combinator selects all HTML elements that are the children of a specified element, meaning element-1 inside the element will be selected, but element-1 inside the element-2 will not be selected.

  • The following example selects all <p> elements that are children of a <div> element:

<div>
    <p>This is paragraph</p>
    <p>This is paragraph</p>
    <p>This is paragraph</p>
    <section>
        <p>This is another paragraph</p>
    </section>
    <p>This is paragraph</p>
</div>

div > p{
    color: red;
}

Note: I think this is enough for the combinator selectors. If you want to learn more about the combinator selector, you can visit the browser and learn. You can use combinator selectors for HTML elements, classes, and IDs.

Attribute Selectors

  • The [attribute] selector select elements with a specified attribute to the HTML element using square bracket attribute.

  • The following example selects all <a> elements with a target attribute:

<a href="https://www.google.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

a[target] {
  background-color: yellow;
}

  • The following example selects all input elements with a type, attribute
<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="" size="20">
  Lastname:<input type="text" name="Name" value="" size="20">
  <input type="button" value="Button">
</form>

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Note: This css selectors are enough to learn if want to learn more you browser and learn more.

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥

HTML5CSSJavaScriptReactFrontend DevelopmentJavaSpringbootSpringbackend