select IDs with different names - css

I know there's a way to select different ids with css to apply the same style., but i can't remember how.
What i mean is apply the same style to the divs below:
content-target1
content-target2
content-target3
content-target4
Any idea about this?


You can just use multiple ID selectors:
#content-target1, #content-target2, #content-target3, #content-target4
If you don't want to repeat the ID selectors, and/or you want to match them only by their common prefix, you can use an attribute selector instead (losing a bit of specificity, as ID selectors don't have wildcard matching capabilities like attribute selectors do):
div[id^="content-target"]


"#id" is how you select an id, and "sel1, sel2" is how you select either sel1 or sel2 for a rule:
#content-target1, #content-target2 { background: red; }


Could you just do
#content-target1, #content-target2, #content-target3, #content-target4 {
CSS HERE
}
edit: forgot my #s

Related

CSS select element which not have TWO criteria

#cp_sidebar_contents .cp_sb_subform input:not([type=submit] && [type=button]){
height:25px;
}
As you can see the code above, I want to select an element which DO NOT HAVE TWO criteria.
It is working if I only put one criteria in the not() function..
But how to not(two criteria) ?

You need to chain the :not selectors, like #cp_sidebar_contents .cp_sb_subform input:not([type=submit]):not([type=button])

Xpath or Css expression that will match with or without a class or id name?

Say you want to find h1 elements with the xpath expression
//h1[#class="bold"]
Is there a way to make it so that it will also match h1 without the exact class name in one expression? Even ones without any class.
What would the css equivalent look like?

How about something like this...
//h1[not(#class and contains(concat(" ", normalize-space(#class), " "), " bold "))]
The overly complicated contains() predicate is to match the bold class name if it appears in the space-delimited list of class names the class attribute may contain.
A CSS selector may be simpler but I'm not very good with those. You could try
h1:not(.bold)
jsFiddle ~ http://jsfiddle.net/ow0fdtbv/1/

How to convert complex xpath to css

I have a complex html structure. New to CSS. Want to change my xpath to css as there could be some performance impact in IE
Xpath by firebug: .//*[#id='T_I:3']/span/a
I finetuned to : //div[#id='Overview']/descendant::*[#id='T_I:3']/span/a
Now I need corresponding CSS for the same. Is it possible or not?

First of all, I don't think your "finetuning" did the best possible job. An element id should be unique in the document and is therefore usually cached by modern browsers (which means that id lookup is instant). You can help the XPath engine by using the id() function.
Therefore, the XPath expression would be: id('T_I:3')/span/a (yes, that's a valid XPath 1.0 expression).
Anyway, to convert this to CSS, you'd use: #T_I:3 > span > a
Your "finetuned" expression converted would be: div#Overview #T_I:3 > span > a, but seriously, you only need one id selection.
The hashtag # is an id selector.
The space () is a descendant combinator.
The > sign is a child combinator.
EDIT based on a good comment by Fréderic Hamidi:
I don't think #T_I:3 is valid (the colon would be confused with the
start of a pseudo-class). You would have to find a way to escape it.
It turns out you also need to escape the underscore. For this, use the techniques mentioned in this SO question: Handling a colon in an element ID in a CSS selector.
The final CSS selector would be:
#T\5FI\3A3 > span > a

Regexp for css definition with specific name in it and value

I have to match all css definitions with name "test" and with color:gray.
For example:
a.test { color:grey; } but also .test { color:grey;}
or a.test:affter, a.test { font-size: 10px; color: gray;}
so it have to take care of multiple \s\r\n and others.
What I already got:
test(\s|\r|\n|[:a-zA-Z()0-9])*\{([a-zA-Z:,\s\n\r-0-1;]*)color[\s\n\r:]*gray([a-zA-Z:,\s\n\r-0-1;]*)\}
but it isn't working in some places: http://regexr.com?32191.
Please help :)
Solution from #nhahtdh, best for me
\.test[:a-zA-Z()0-9\s.,]*\{[a-zA-Z:,\s0-1;-]*color[\s:]*gray([a-zA-Z:,\s0-1;-]*‌​)\}

I made a fairly simple one:
[^{]*\.test(?:{|[ :.][^{]*{)[^}]*color[ \n\r]*:[ \n\r]*gray *;[^}]*}
This should match your specification, but won't catch any CSS errors.
http://regexr.com?321ah

This regex matches your test cases.
[^\r]*\.test(\s|\r|\n|[:a-zA-Z()0-9])?[^{]*\{([a-zA-Z:,\s\n\r-0-1;]*)color[\s\n\r:]*gray([a-zA-Z:,\s\n\r-0-1;]*)\}
http://regexr.com?32197
The issue is way more complex though. There might be arbitrary characters in different context such as urls, filters and so on. As far as you need to match only these very specific cases, it ought to work.

CSS, someClass:not(.foo):not(.bar)

In CSS I have to specify a specific class (e.g., .myClass) but exclude instances that have either one of two classes (e.g., not .foo nor .bar).
I looked into CSS3 new :not() syntax, but I am not sure how to specify the two classes that I don't want to use. I believe this is incorrect (it did not work for me). However, it seems like a concise way to show what I am trying to do:
.myClass:not(.foo):not(.bar) {
...
}

Just separate them with a comma:
.myClass:not(.foo, .bar){
...
}

Use a comma in-between them:
.myClass:not(.foo, .bar) {
...
}
Source: http://devsnippets.com/article/5-advanced-css-pseudo-class.html

Resources