CODEWITHSUNDEEP
csscss-selectors
Manish
Manish

Reputation: 6286

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.

Upvotes: 1

Views: 596

Answers (3)

Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

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>

Upvotes: 1

CD..
CD..

Reputation: 74096

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.

Upvotes: 1

jerone
jerone

Reputation: 16861

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

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

Upvotes: 4

Related Questions