What does this format do in CSS: p[class|=abc]?

What does this format do in CSS:

p[class|=abc]

and开发者_开发知识库

#pTag a[href^="https://"]

I'm not able to search for it as I don't know the exact terminology for this.

Any help with some links to study on these square brackets thing would be greatly appreciated.

Thanks in advance.

They are Attribute selectors. Read the link for more information.

Please note that the last CSS example is a CSS3 selector.

Selectors

E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".

.

[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

Hyphen [|=] Attribute Selector:

The hyphen (-) is used primarily as a delimiter for language codes.

<style>
    .test        { display:none; }
    [lang|="en"] { display:block; }
</style>

<div class="test" lang="en-us">Test for [|=] (Hyphen) succeeded.</div>

Prefix [^=] Attribute Selector:

<style>
    .test       { display:none; }
    [attr^="B"] { display:block; }
</style>

<div class="test" attr="Blue">Test for [^=] (Prefix) succeeded.</div>