Menu
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?
256
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 (.)
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.
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.
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.
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:
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
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]
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.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
