Input selector ways and difference :atribute vs [atribute]

HTML-CSS
1

Like:

input:required
{
background: green;
}

vs

input[required]
{
background: green;
}

another one

textarea:required:focus
{
background: green;
}

vs

textarea[required]:focus
{
background: green;
}

I know the:required is select <input required=""> but second is also select atribute not?

Thank you!

2

in this case both of these works the same. The thing is that those are two different selection classes of css ( [attr] and :pseudoclass or ::pseudoclass). First is selection by attribute, second - by pseudoclass. Sometimes they can give same results when attribute and pseudoclass are coincided with each other, but mostly not.

3

And from where can know where use :selector and ::selector? As I saw there is have some default whitch one to use?

4

:: is for pseudoelements, so [basically] elements that are created by the CSS

.something::after {}

That defines styles for a pseudo element that appears after .something, not an HTML element

.something::first-line {}

That lets you style the first line of some text. Again, not HTML, it’s not possible to specify what the first line of text is in HTML.

: is for pseudclasses, which let you style an element based on state.

.something:hover {}

That lets you specify the style for .something when a mouse cursor is hovering over it.

.something:active {}

That lets you specify the style for .something when a mouse/finger is held down on it.

2 Likes
5

::placeholder? For that can set style not?