i have this css:
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
and i have this html :
<div class='test1'>name</div>
<div class='test2'>desc_name</div>
<div class='test1'>family</div>
<div class='test2'>desc_family</div>
<div class='test1'>password</div>
<div class='test2'>desc_pass</div>
what i have to do is to select the class test1 but only the tags that contains "family" inside the tag and give a background
i need a solution with css only, i dont need to change inside the html
is it possible ?
Thank You
Impossible with pure CSS. You cannot select on elements content with CSS(3 and higher).
The only you can do is specifying some attribute like:
<div class='test1' data-value="family">family</div>
And then select it with CSS:
div.test1[data-value='family'] { /* ... */ }
If you are using anything below CSS3 -
div.test1:contains("family") {
background: *;
}
The :contains() pseudo-class was deprecated in CSS3 - ergo i wouldn't recommend it, nor am I entirely positive any browser completely supports it.. This answer is entirely subjective.
Edit: apparently the :contains() psuedo class works in jQuery (tested in v 1.9).
You can use jQuery to change your styles. (this solution calls for a CSS only solution, but if this is available, use it!)
$("div.test1:contains('family')").css({ background: "whatever" });
you can use multiple class something like this,
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.family {
/* style */
}
and HTML code,
<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>
<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>
I would suggest this one in orther to prevent override
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.test1.family {
/* style */
}
Related
I am trying to write CSS that only applies to certain Divs. I have code that works for this example, but I would like to do it in a way that doesn't require me to put .landing in front of every line
HTML
<div class="landing">
<h1>Hey</h1>
<p>Hi</p>
</div>
<div class="notlanding">
<h1>Hey</h1>
<p>Hi</p>
</div>
CSS
.landing h1{
color: red;
}
.landing p {
color: blue;
}
This produces what I want to accomplish, but is there a way to wrap both h1 and p in .landing?
Something like this
.landing {
h1{
color: red;
}
p {
color: blue;
}
}
No this way you can not use in CSS.
But you can use SASS - Syntactically Awesome StyleSheet
http://sass-lang.com/
SASS allows you to write dynamic css like variable declaration and much more. Just check above link.
You could do that if we'd be using a css compiler like less or sass... I think you can't do it in pure css.
Another way to achieve this is using Shadow DOM (not widely supported yet). Then, your landing div cound be a shadow root and could have its own stylesheet... this basically works in Angular 2 today.
I love the "after" (+) selector, it's good to style things after specific elements.
Such as:
.title+div {
background-color: yellow;
}
would make the background color of the div following the element with .title class, yellow.
However, I need a more dynamic way of selecting things.
How would you express this in css?:
"Make the background color of the visibility:visible element, yellow"
Any direction is appreciated.
You can't select non-inline properties in CSS, so something like div[visibility:visible] wouldn't work unless you explicitly stated the property inside the style attribute for the element.
The best way to select an element like this is to select the class with the styles applied to it (if there is one).
.title + .visible {
background-color:yellow;
}
If this isn't the case, you should almost always use JavaScript.
Well as you know there isn't only one type of selector in CSS. In the link below you can find more complex selector such as Attribute Selector:
div[target]{background-color:yellow}
.firstgroup
{
height:50px;
width:50px;
background-color:lightblue;
margin:10px;
}
.secondgroup
{
height:50px;
width:50px;
background-color:lightpink;
margin:10px;
}
<div class="firstgroup" target="a"></div>
<div class="firstgroup"></div>
<div class="secondgroup" target="ab"></div>
<div class="firstgroup"></div>
<div class="secondgroup"></div>
Refrence :Complex Selectors
This is potentially possible, albeit it's very, very fragile and has some requirements.
First, the visibility:visible must appear in the element's inline style attribute, like so:
<span style="visibility:visible">element text</span>
Second you must know the exact string, if a space is added you'll need to either change selector or account for both/all possibilities.
So, with those provisos, you can implement this selection as follows:
[style*="visibility:visible"] {
background-color: yellow;
}
[style*="visibility: visible"] {
border: 1px solid #000;
}
<span style="visibility:visible">element text</span>
<span style="visibility: visible">element text</span>
Now, given those requirements, it's usually far easier to just use JavaScript (or one of its libraries, if you must):
Array.prototype.forEach.call(document.querySelectorAll('span'), function (el, index) {
if (el.offsetHeight) {
el.style.backgroundColor = 'yellow';
el.textContent = el.textContent + ' (' + index + ')';
}
})
span {
visibility: visible;
}
.jsAddedClass {
background-color: yellow;
}
#exception {
display: none;
}
<span>element text</span>
<span>element text</span>
<span id="exception"></span>
References:
CSS:
Substring matching ([attribute*="value"]) attribute selectors.
JavaScript:
Array.prototype.forEach().
HTMLElement.offsetHeight.
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I have this div:
<div dir="ltr"></div>
That is generated automatically via imap_ function, and therefore I am not able to assign any style to it with the style="" tag.
My question is, how can I assign styles to the div above?
An attribute selector works well if you just want to style this specific element:
div[dir="ltr"] {
/* Styles */
}
Have you tried to use CSS for this?
div {
color: #cecece; /* change the color */
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/wxft9/
[dir='ltr'] {
color: #cecece;
}
or with div - div[dir='ltr']
http://jsfiddle.net/aLvZk/
Try this:
CSS:
div[dir='ltr']
{
/*Styles*/
}
Fiddle
I was wondering if there was a way in CSS to package styles under a specific div to be different. Here is an example of what I would like to accomplish:
<html>
<body>
<div id="enableTheme">
<p>some themed html</p>
</div>
<div id="disableTheme">
<p>some none-themed html</p>
</div>
</body>
</html>
The css would do something like this:
#enableTheme{
p{
css styles
}
label{
different styles
}
div{
even more different styles
}
...
}
where everything under the div that has the id "enableTheme" would be themed the way I want it to be.
Thank you in advance for the help
edit: sorry guys I wasnt very clear in my question. I know about the
#enableTheme p{
//Styles
}
but my problem is I have a hude css file that I dont want to have to add the "#enableTheme" one by one to each element, thats why I was wondering if there was a way to do it globally for a pack of styles that I had premade.
You're pretty much there. Try
#enableTheme p {
/* styles */
}
#enableTheme label {
/* and on and on */
}
Incidentally, if you used SCSS, what you'd written would output exactly the CSS you want for this situation.
Edit: ...but I'd recommend learning more about CSS before getting into Less/Sass/SCSS
Use that syntax:
#enableTheme p{
css styles
}
#enableTheme label{
different styles
}
#enableTheme div{
even more different styles
}
...
(this is probably a duplicate, but anyway)
Yes, this is the Descendant Selector. Just do this:
#enableTheme p
{
css styles
}
#enableTheme label
{
different styles
}
#enableTheme div
{
even more different styles
}
try
#enableTheme p {
}
#enableTheme label {
}
#enableTheme div {
}
or, if they're direct descendants, you may use
#enableTheme > p {
}
#enableTheme > label {
}
#enableTheme > div {
}
In regular CSS no, you can't do that. But you could do something like:
#enableTheme p{
css styles
}
#enableTheme label{
different styles
}
#enableTheme div{
even more different styles
}
Note that there are options, like LESS and SASS, that allow you to do what you proposed.