Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css target just class name starts with and Ends with string

I want to create certain standard css code for our company and as branding, I want to start all my class names with my company name- and end all with -Cls

<div class="Nam-StdCss-Cls"></div>

<div class="Nam-StdCss-Raduis-Cls"></div>

<div class="Nam-StdCss-Border-Cls"></div>

Also I want to allow users to use their custom css as well

 <div class="Nam-StdCss-Cls menu"></div>

<div class="menu Nam-StdCss-Cls"></div>

I tried to do and This is not allowing to enter the custom class like menu.

[class^="Nam-"][class*="StdCss-1"][class$="-Cls"]{}

I tried and this is not checking starting and ending class name

 [class*="Nam-"][class*="StdCss-1"][class$=*-Cls"]{}

So I want to know, How we can just check starting and ending of the class name and not the entire string?

like image 256
Sujay U N Avatar asked Jan 18 '19 14:01

Sujay U N


People also ask

How do you target a class name in CSS?

To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)

How can you write starts with or ends with or contains for CSS selector?

The main purpose of using starts with (^), ends with ($) and contains (*) in CSS Selector is to locate the UI elements having the attribute values text which is dynamically changing at the beginning, middle or end.

How do I target a specific element in CSS?

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

Why do we use * in CSS?

The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.

Which CSS selector is used to select all elements with target attributes?

CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. The following example selects all <a> elements with a target attribute:

How to find the beginning and ending text in CSS selectors?

We can also use contains ( *) in CSS Selectors to locate using the beginning and ending text in the attribute values. p [class*=’ma‘] – locates the p tag having the class attribute value containing ‘ma’ text, which is at the begging of ‘main’ text

How to select element that has a class that starts with string?

1 Select element that has a class that starts with a string 12 CSS: Class name selector- name starts with 8 CSS Selector on onclick function 4 Get element by PART of class name [JavaScript]

What is a CSS class attribute?

CSS class starts with "." | attribute | How to use Examples - EyeHunts What is a CSS Class attibute in HTML element? A CSS class attribute is used in the element as an identity of it. Classes are reusable when doing style and format of any elements.


1 Answers

Basically we can have 4 situations:

Having only the needed class:

<div class="Nam-StdCss-*-Cls"></div>

Having the needed class at the start

<div class="Nam-StdCss-*-Cls ... more-class"></div>

Having the needed class at the end

<div class="more-class ... Nam-StdCss-*-Cls"></div>

Having the needed class in the middle

<div class="more-class ... Nam-StdCss-*-Cls ... more-class"></div>

You can write a selector for each one like below:

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
/*note the space after the class name---------v*/
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
/*       v---note the space before the class name*/
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
/*       v------space before and after---------v */
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}
<div class="Nam-StdCss-Cls">aaa</div>
<div class="Nam-StdCss-anything-Cls">aaa</div>
<div class="Nam-StdCss-Cls ... more-class">bbb</div>
<div class="Nam-StdCss-other-Cls more-class ...">bbb</div>
<div class="more-class ... Nam-StdCss-Cls">ccc</div>
<div class="more-class ... Nam-StdCss-radius-Cls">ccc</div>
<div class="more-class ... Nam-StdCss-Cls ... more-class">ddd</div>
<div class="more-class ... Nam-StdCss-radius-Cls ... more-class">ddd</div>
<br>
<div class="more-class  more-class">not !!</div>
<div class="more-class Nam-StdCss  more-class">not !!</div>
<div class="Nam-StdCss  more-class">not !!</div>

You should pay attention as this may target non needed element in some particular cases which is due to the fact that the order doesn't matter for classes.

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}
<div class="Nam- StdCss- -Cls">aaa</div>

<div class="StdCss- Nam- -Cls">aaa</div>

<div class="-Cls StdCss- Nam-">aaa</div>
like image 127
Temani Afif Avatar answered Oct 05 '22 21:10

Temani Afif