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.
Related
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
Have worked example:
.hov:hover+.next+.result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
jsfiddle
When hover on first element the third element have result. Any shorthen version of + + if i need more + +, something like .hov:hover+div:nth-child(2) - but this not work.
+ is Adjacent sibling selector in CSS, so it requires both selector elements to be next to each other. Instead, you can use ~ which is General Sibling selector here, which doesn't require the two elements to be next to each other.
.hov:hover ~ .result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
There is no way to make what you want to do shorter. This is simply the way the selector works. The solution you proposed (element + next(3) or whatever syntax you whish to use there) does not exist.
Your selector has some issues if you change the structure of your HTML (for example add a paragraph in between). What you can do to make your code more reliable is answered by Nisarg and use the ~ selector to select elements.
Why not change the HTML and make it more reliable? What you are doing here is working for you maybe, but if you make changes to your HTML this CSS breaks. Try adding classes for all items you want selected. Don't worry if you have three or four classes on elements, that is completely normal.
.hov:hover {
color: red;
}
<div class="hov">hover</div>
<div class="next hov">next</div>
<div class="result hov">result</div>
I have this html code here:
<div default_name="RandomName1">
<div name="RandomName1">RandomName1</div>
<div name="RandomName2">RandomName2</div>
<div name="RandomName3">RandomName3</div>
</div>
The property default_name on parent div changes from time to time. I would like to set the child div which has name matching default_name to background-color:red.
Like:
<style>
div > div[name=default_name_of_parent] { background-color: red }
</style>
I have no control over what the name values are, users set it. Is this possible via style sheet?
Thanks
This can be done, if you make a rule containing a selector for each possible “combination”, like so:
div[default_name=RandomName1] > div[name=RandomName1],
div[default_name=RandomName2] > div[name=RandomName2],
div[default_name=RandomName3] > div[name=RandomName3]
{ background-color: red }
http://jsfiddle.net/wc5whfwa/
But j08691 is totally right with their comment – this should be avoided at all cost if possible, data- attributes would be the way to go.
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;
}
Is there a fast way in CSS to remove all of the styles applied to an element? For example, say a tab menu of some sort:
<div class='outer'>
<div id='d1'></div>
<div id='d2'></div>
<div id='d3'></div>
<div id='d4'></div>
</div>
The CSS is applied...
.outer { foo:blee; bar:blah; bas-bloo:snork; /*...long long list...*/ }
Now, I want #d3 (for example) to return to default styling, but I don't want to explicitly unset all of the parent styles:
#d3 { remove-styles:all } /* <- [I made this up, obviously] */
Pipe dream or possibility?
In CSS3, yes. You could use the negation pseudo-class:
.outer:not(#d3) { foo:blee; etc etc }
Too bad CSS3 support is a little lacking at the moment with most browsers...
With CSS level less than 3, you're screwed. Sorry.
No. Not feasibly possible. Just override it.