I have a group of class name:
.hSpace5{padding-top:0.3125em;}
.hSpace10{padding-top:0.625em;}
.hSpace15{padding-top:0.9375em;}
.hSpace20{padding-top:1.25em;}
.hSpace25{padding-top:1.5625em;}
.hSpace30{padding-top:1.875em;}
.hSpace35{padding-top:2.1875em;}
.hSpace40{padding-top:2.5em;}
Is it possible to target all this class names by referring to the to the first few characters .hSapce--?
you can do it like this in css3
div[class^="hSpace"]
OR
div[class*="hSpace"]
Both are not similar but in your scenario both will work.
First is "starts with class name" and second is "contains class name".
You can use the below selector to select all elements whose class attribute contains the value hspace. Note that this is a contains selector and hence the string can be present anywhere in the class name.
div[class*='hspace'] {
/* styles */
}
div[class*='hspace'] {
color: red;
}
<div class='hspace1'>aa</div>
<div class='hspace2'>bb</div>
<div class='hspace-b'>ab</div>
<div class='c-hspace'>cd</div>
<div class='hvspace'>cd</div>
<!-- will not be selected -->
But check out for browser support.
As mentioned in Rab Nawaz's answer, you can use the below also.
div[class^='hspace'] { }
In-fact, this method might be more suitable for your case because it selects all div whose class starts with hspace.
More information can be found in this W3C Selectors Level 3 Spec in the table present under Section 2.
Related
I'd like to select things similarly to how classes are selected (but I would like to use other attributes). In the same way that class='item-button item-button-selected' can be selected with both .item-button and .item-button-selected.
The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:
[data-foo~="a"] {
color: red;
}
[data-foo~="a"][data-foo~="b"] {
color: blue;
}
<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b
In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.
This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 3 years ago.
I'm taking one of the edX classes on CSS and they've included:
[class*='example'] { background-color: orange; }
in the CSS stylesheet. Not familiar with that type of an attribute, so I looked it up. Essentially it just adds a style to anything using a specific class [(or id), depending on the specific attribute]. Why wouldn't you just add:
background-color: orange;
to the appropriate class, or id, and be done with it? Is there a significant purpose to this type of attribute that I'm missing?
The * in [class*='example'] is a selector that retrieves all elements that contains example in the class-name and not just elements with the class-name example.
So [class*='example'] will target all of the following:
<div class="iamanexample"></div>
<div class="example"></div>
<div class="whereisyourexample"></div>
Whereas .example or [class='example'] will only target the second element <div class="example"></div> from the above three.
Other attribute selectors in CSS includes the:
~ selector: This selector retrieves all elements whose targeted attribute's value contains the exact queried value. This selector can include multiple values in the form of a whitespace-separated list of words.
| selector: This selector retrieves all elements whose targeted attribute's value is exactly the queried value or begins with queried value immediately followed by a hyphen.
^ selector: This selector retrieves all elements whose targeted attribute's value starts with the queried value.
$ selector: This selector retrieves all elements whose targeted attribute's value ends with the queried value.
Check and run the following Code Snippet for a practical example and explanation in the code comments on how each of the above selector works:
/* all elements whose abc value contains "ment" */
div[abc*="ment"] { font-weight: 700; }
/* all elements whose abc value is exactly "element-1" */
div[abc~="element-1"] { color: blue; }
/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */
div[abc|="element"] { background-color: green; }
/* all elements whose abc value starts with "x" */
div[abc^="x"] { background-color: red; }
/* all elements whose abc value ends with "x" */
div[abc$="x"] { background-color: yellow; }
div { margin: 5px 0px; }
<div abc="element-1">Hello World!</div>
<div abc="element-2">Hello World!</div>
<div abc="xElement1">Hello World!</div>
<div abc="xElement2">Hello World!</div>
<div abc="element1x">Hello World!</div>
<div abc="element2x">Hello World!</div>
I am working on a web application, and i have a div with ID = WebPartWPQ2 .I define the following css rule to define its min-width:-
#WebPartWPQ2 {
min-width:1280px;
}
currently this will apply to all the Divs that have this ID. but currently i have the following div :-
<div id="WebPartWPQ2" class="ms-wpContentDivSpace " style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">
which have the associated ID and a class named "ms-wpcontentDivSpace" , so how i can exclude this Dic that have this class from my above css rule ?
#WebPartWPQ2.ms-wpContentDivSpace {
min-width: 0; /*fallback*/
min-width: initial;
}
You could also change your declaration to this:
#WebPartWPQ2:not(.ms-wpContentDivSpace) {
min-width:1280px;
}
I personally think the first one is easier to read.
In the first place, it is not right to have several elements in the same document sharing the same ID. If you decide to give an ID to an element, it must be unique.
If you want to differenciate groups of elements, classes are intended for that.
ID stands for identifier, which means that it must be unique. Use class instead of id, if you intend to use the same rule at more tags at the same page and do not duplicate ids.
.WebPartWPQ2:not(.exception) {
min-width:1280px;
}
<div class="ms-wpContentDivSpace WebPartWPQ2 exception" style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">
the :not() selector would be useful, as others have already mentioned. It has good support in modern browsers, but not IE8.
If you needed an IE8-friendly solution,first declare the rule that is true most of the time:
#WebPartWPQ2 {
min-width:1280px;
}
Then declare a rule that overrides the first with a higher specificity:
#WebPartWPQ2.ms-wpContentDivSpace {
min-width: initial;
}
Select one part of text in div class:
<div class="enabled_disabled disabled">
<div class="enabled_disabled">
<div class="enabled_disabled">
<div class="enabled_disabled">
<div class="enabled_disabled disabled">
I have those div tags, is there any xpath syntax or fizzler CSS selectors syntax to select just those div tags which have enabled_disabled only (the 3 in the middle)? not those with enabled_disabled disabled
var html = new HtmlDocument();
html.LoadHtml(getitems);
var doc = html.DocumentNode;
var items = (from r in doc.QuerySelectorAll("div.enabled_disabled:not(.disabled)")
let Name = r.InnerHtml//QuerySelector("div.enabled_disabled div.title_bar div.rate_title span.name").InnerText.CleanInnerText()
select new {
CName = Name
}).ToArray();
Fizzler
To select an element with only the class enabled_disabled, you would use:
[class='enabled_disabled']
Using a :not selector is not available in vanilla Fizzler, but can be used if you grab FizzlerEx
XPath
To select an element with only the class enabled_disabled, you would use:
div[#class='enabled_disabled']
In plain old CSS
If the div's assigned classes starts with enabled_disabled:
div[class^=enabled_disabled ]
If the div's assigned classes contains enabled_disabled
div[class*=enabled_disabled ]
If the div only has the class enabled_disabled
div[class=enabled_disabled ]
If the div has the class enabled_disabled and not the class disabled
div.enabled_disabled:not(.disabled)
Given the HTML you list in your question, either of the last two will work for you.
more on attribute selectors from MDN, and, more on :not()
You could use this selector that will match the class and will avoid the other.
$(".enabled_disabled:not('.disabled')");
and you can take out contents out of $()
and it is valid css selector
.enabled_disabled:not(.disabled)
Use not() selector in css.The :not pseudo-class represents an element that is not represented by its argument.
.enabled_disabled:not(.disabled){
}
FIDDLE
More about
SEE THE LINK
I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.
This its structure:
<li class="post quote">
{other code}
</li>
The problem is that the class name has a space in it.
How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.
The problem is that the class name has a space in it.
This is not possible in CSS. What you are doing is giving the element two classes.
You can address them such:
.post.quote { .... }
but in your case, it's probably better to use a valid separator like
post_quote
This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:
// css
.post { ... } // elements with the post class
.quote { ... } // elements with the quote class
// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');
You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:
// css
.post.quote { ... } // elements with both the post and quote classes
// jQuery
var postAndQuoteLis = $('.post.quote');
This might work:
$('li').each(function() {
if($(this).attr('class').indexOf(" ")>-1) {
$(this).css('border','1px solid #ff0000')
}
}