Question 182194 in Html Question posted in
Some basic documentation can be found here.

Html – Difference between CSS Attribute Selectors and Pseudo-Elements for Input Tags

<input type="text" placeholder="nothing" title="google" required>

**Inside CSS file: **

input[type="text"]{
border: 2px solid red;
}

input::placeholder{

color:green;
}

input[title="google"]{
background-color:black;
color:white;
}

Why the writting process is different for type,placeholder and title? Though the writting looks same inside tag. How to understand which are attribute and which are elements?

Tags:

2

Answers


  1. 0

    In CSS, we have attribute selectors and pseudo-elements that serve different purposes and have distinct syntax. Let’s understand their differences and how to identify them:

    Attribute Selectors:
    Attribute selectors allow us to target elements based on their attribute values.
    To use them, we enclose the attribute and its value in square brackets, like this: [attribute="value"].
    For example, in your code, input[type="text"] targets <input> elements that have their type attribute set to "text".
    Similarly, input[title="google"] targets <input> elements with the title attribute set to "google".
    With attribute selectors, we can apply styles to elements based on specific attribute values.

Pseudo-Elements:
    Pseudo-elements, on the other hand, allow us to target specific parts or states of an element.
    We indicate a pseudo-element by using double colons :: before the element name.
    For instance, input::placeholder targets the placeholder text of <input> elements.
    Pseudo-elements enable us to style pseudo-parts or states, such as the placeholder text, first letter, or first line of an element.

    To differentiate between attribute selectors and pseudo-elements:

    Attribute selectors use square brackets [attribute="value"] to target elements based on their attribute values.
Pseudo-elements use double colons :: before the element name to target specific parts or states of elements.

    In your CSS code, the selectors input[type="text"], input[title="google"], and input::placeholder each target different aspects of the element:

    input[type="text"] applies styles to <input> elements that have the type attribute set to "text".
input[title="google"] targets <input> elements with the title attribute set to "google".
input::placeholder targets the placeholder text within <input> elements.

    By using these selectors, we can apply unique styles to specific elements or parts of elements based on their attributes or states.

    Login or Signup to reply.
  2. 0

    input::placeholder selects the placeholder of an <input>, whereas input[attribute="value"] selects an <input> whose attribute has a value of value. These do different things.

    Visualized example:

    /* Selects an <input> with a 'placeholder' attribute */
input[placeholder] {
  color: #2ab7ca;
}

/* Selects the placeholder itself */
input::placeholder {
  color: #ff6b6b;
}


/* Ignore these */

body {
  margin: 0;
  padding: 2em;
}

input {
  display: block;
  margin: 1em 0;
  height: 2em;
  width: 100%;
  padding: 0.5em;
}
    <input
  type="text"
  placeholder="This placeholder is red and not editable."
>

<input
  type="text" placeholder=""
  value="...whereas the input content itself is blue and editable."
>

    Note: This answer was converted from a comment as I can’t find any duplicate targets.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search