how to select plain HTML-text in CSS? - html

Question

Does anyone of you know how to select plain HTML-text in CSS?
I have the following structure:
<div id="A">
<p class="caption"> caption1 </p>
<div class="tabs">
<div class='moving_bg'></div>
<p class="text tab_item"> content</p>
<p class="text tab_item"> content</p>
<p class="text tab_item"> content</p>
<p class="text tab_item"> content</p>
<p class="text tab_item"> content</p>
<p class="text tab_item"> content</p>
caption2
<p class="standardtext tab_item">content</p>
<p class="standardtext tab_item"> content</p>
<p class="standardtext tab_item"> content</p>
</div>
How do I select the caption2 in CSS?
As soon as I assign a class or a p-tag to it, it breakes the structure of the tab-plugin I'm using.
Edit:
I used this plugin and changed it a little bit into:
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
top: $(this).position()['top']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
slideContent: function(obj) {
var margin = $(obj).parent().parent().parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().parent().parent().find(".tabslider").stop().animate({
marginLeft: margin + "px"
}, {
duration: 300
});
}
}
$(document).ready(function() {
TabbedContent.init();
});

Answer 1

You can't. You can only select elements and pseudo-elements/classes.
You might be able to get away with styling .tabs and then overriding the styles on .tabs > *.
As soon as I assign a class or a p-tag to it, it breakes the structure of the tab-plugin I'm using.
Edit the plugin then.

Answer 2

You can use the * selector at the top of your CSS. It will initially style all elements on your page, even plain text, and then apply the rules for the rest of your selectors.
NOTE: This selector is known to be slow, and you will have to override any problematic rules in it. (Check CSS Lint)
* {
font-size: 13px;
color:red
}
(...)

Answer 3

.tabs { foo:bar; jim:jam }
.tabs > * { foo:original; jim:original } /* Every child element of tabs */
This requires you to know what the inherited/original values are, likely re-specifying styles already declared, but it will work.
If this is a prohibitive number of styles, you could modify your rules like:
#a, #a .tabs > * { ...many styles applying generally ... }
.tabs { ...specific styles for just this element... }
The specificity rules of CSS will cause the rules you specify specifically for the child elements to take precedence over those specified on the parent.

Answer 4

You need to select it as part of <div class="tabs"> so
div.tabs{
/* whatever */
}
as it exists in that div.
You may need overwrite some styles in the p.tab_item