Suppose I have two elements with multiple classes:
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
How can I use the “pipe” selector (|=) to select the fruit- classes?
I have tried something like the following but this seems not to work.
p[class|=fruit] {
color: red;
}
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
This is clearly because in the second case, the class string does not begin with fruit-, and the selector is matching naively.
The |= selector only selects the starting portion of the specified attribute.
You'll want the *= operator instead.
p[class*=fruit-]
It will search for classes that contain the phrase fruit-x where x is anything you want.
p[class*=fruit-] {
color: red;
}
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
<p class="whatever fruit">Third (No selection)</p>
<p class="fruit noselect">Fourth (No selection)</p>
Related
Is there a selector method that allows policing whether, eg. the HTML tag is a clean "<html>" with no attributes whatsoever?
I'm trying to create a Stylish override sheet for browser-generated image pages in Firefox, but I essentially have to apply it to all URIs since such pages are always still ostensibly from the images' own domains.
The easiest way seems to be testing whether the HTML and Body tags have zero attributes (plus only-child and class selection on the image tag) because the structure of most documents which haven't been generated by the browser won't start as simply as <html><body><img class="...
But all I can find is how to exclude a specific attribute, not all of them.
I've tried the following with no success:
[] {
color: blue;
}
[*] {
color: red;
}
<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>
The only remaining option I can come up with is just policing the standard attributes one would see ("class", "style", "name", "lang", etc.), but that's a lengthy and ever-changing list, notwithstanding the numerous non-standard ones.
A selector that matches a tag without attributes doesn't currently exist.
I read through the latest CSS selector reference and couldn't find a selector that does what you wish.
You can't use an asterisk in the attribute selector to select everything unfortunately. These two railroad diagrams represent what is allowed:
So your first two attempts are invalid, and the valid empty string seems to have no effect:
[] {
color: blue;
}
[*] {
color: red;
}
[""] { /* Seems to select nothing, rather than 'no attribute' */
color: magenta;
}
<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>
I can't come up with any possible hack that doesn't involve JavaScript. I will edit this answer if I figure out a solution.
Is there a selector that can select all elements with a certain color? I want to change all text with color: #1a0dab to color:00b0f4.
If the styles are defined inline, you can do this:
[style*="#1a0dab"] {
color: #00b0f4 !important;
}
Demo:
[style*="#1a0dab"] {
color: #00b0f4 !important;
}
<p style="color: #1a0dab">paragraph 1</p>
<p>paragraph 2</p>
<p style="color: #1a0dab">paragraph 3</p>
There's no pure CSS way of doing this if the original styles aren't defined inline.
If you have access to JavaScript, you can do something like the following, though performance will probably be poor if your page has a lot of elements or you need to run the function frequently:
[...document.querySelectorAll('*')]
.filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')
Note that you need to use the RGB representation, not the hex version, to check equality.
Here's a demo of the latter approach:
[...document.querySelectorAll('*')]
.filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')
.forEach(el => el.style.color = '#00b0f4')
.has-color {
color: #1a0dab;
}
<p class="has-color">paragraph 1</p>
<p>paragraph 2</p>
<p class="has-color">paragraph 3</p>
There is no such selector available in Javascript/jQuery. Perhaps you can:
1 - Update the CSS files and find/replace all instances instead
2 - Add a class to all the required elements and then use the class to target them.
You should make a list of all the tags you need to change color and then with jquery give a unique color change order
I have all these divs with an identical ID name except for the fact that they all have a different number at the end.
I know I can use a class but it must be an ID.
<div id="myid1">text</div>
<div id="myid2">text</div>
<div id="myid3">text</div>
<div id="myid4">text</div>
<div id="test1">text</div>
<div id="test2">text</div>
My question is using css how can I select them all but shorter than this .
#myid1,#myid2,#myid3,#myid4{
color:red;
}
Does this type of thing exist and if so how do you write it?
myid1[*]{
color:red;
}
Just use the prefix attribute selector
[id^="myid"] {
}
This selector targets any element with an ID attribute that has the prefix "myid" - quotes around the value are optional. This selector works in IE7 & above as well.
you can use begins with this attr selector.
[id^=myid] {
color:red;
}
DEMO
CSS3 should help here:
div[id^="myid"]
AND
div[id^="test"]
Yes, there's a way
<div id="myid1" class="foo">text</div>
<div id="myid2" class="foo">text</div>
<div id="myid3" class="foo">text</div>
<div id="myid4" class="foo">text</div>
<div id="test1">text</div>
<div id="test2">text</div>
and css
.foo { color:red; }
UPDATE
If those have to be IDs, try with [id^=myid]
I think it would work a lot better for you to use classes as incremental ids goes against HTML and general programming principles. You could rewrite it like so:
<div class="myid" data-id="1">text</div>
<div class="myid" data-id="2">text</div>
However, if you must keep the ids as they are, you can use the attribute selector:
[id^=myid] {
color: red;
}
In your case this would do it:
[id=^"myid"] {
//your rules
}
That selects all elements whose id attribute begins with "myid".
You're not limited to the id attribute though. In fact, you could use any other html element's attribute.
Let's say you wanted to select all <a> tags whose "href" attribute begun with "http://stackoverflow.com". The following would do it:
a[href=^"http://stackoverflow.com"] {}
There's really a ton of options. Instead of pointing them out myself I'll you link to the w3 page where all of it is detailed: http://www.w3.org/TR/selectors/#attribute-selectors
use classes in addition to the ids (if you really need the ids):
<div class="mytext" id="myid1">text</div>
<div class="mytext" id="myid2">text</div>
<div class="mytext" id="myid3">text</div>
<div class="mytext" id="myid4">text</div>
<div id="test1">text</div>
<div id="test2">text</div>
then the CSS is simple:
div.mytext {
color: red;
}
So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>
<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>
I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.
You can use following-sibling combinator: +
h2.interviewer + p { /* style goes here */ }
Sure:
h2.interviewer + p {
color: red;
}
I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
<p>Is it ok if I ask you a question now?</p>
<p>More text here.</p>
</div>
<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
<p>Sure go ahead.</p>
</div>
You could then do this:
h2.interviewer + div {
color: red;
}
By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
The <dialog> element never made it into HTML5. It does not exist.
In css examples, I've seen rules defined starting with a . and some starting with # - sometimes these are mixed in the same file. What is the difference between these rules:
h1 { font-size:18pt;}
.new-alerts { font-size:11pt; font-weight:bold;}
#old-alerts { position:relative; font-size:10pt; }
Are they referenced differently on the html page? Is it how the properties are inherited?
. refers to a class. <span class="one" /> could be selected with .one.
# refers to an ID. <span id="one" /> could be selected with #one.
You should be using classes when there could be more than one of a given element, and IDs when you know there will only be one. #navigation-bar would be using an ID because you will only have one navigation bar in your layout, but .navigation-link would be using a class name because you will have multiple navigation links. (It'd be better practice to use #navigation-bar a:link to get the navigation links, but you get my point.)
The dot . is a class selector, the hash/pound/octothorpe # selects by an ID:
<style>
.foo { ... }
#bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>
IDs have to be unique throughout a document, classes don't have to be. That's basically the primary difference. There are some things to note with regard to scripting but those are usually not of particular interest when styling.
Furthermore, an element may belong to multiple classes:
<p class="foo bar baz">
and as seen above, classes and IDs are not mutually exclusive.
. is a class and can be reused many times and for different elements
# is an ID and must be used only once on each page.
See Class vs ID