I need help selecting the following DIVs based on IDs but excluding some of the children DIVs in two different types of pages using a single style.css file:
PAGE1:
...
<div id="main">
<div id="post"> selected </div>
</div>
...
PAGE2:
...
<div id="main">
<div id="maincontent"> selected </div>
<div id="singlepost">
<div id="post"> selected </div>
<div id="comments"> excluded </div>
</div>
<div id="sidebar"> excluded </div>
</div>
....
I have tried with:
#main > :not(#sidebar), #singlepost > :not(#comments) a {
color: rgb(88, 134, 76) !important;
}
(!important overrides some inline CSS I cannot change)
The result is bad because Chrome only recognizes #main > :not(#sidebar), and ignores #singlepost > :not(#comments) a, thus turning all text into this color, not just links, and only excluding <div id="sidebar">, not <div id="comments?>.
I also tried:
#singlepost > :not(#comments) a {
color: rgb(88, 134, 76) !important;
}
#main > :not(#sidebar) a {
color: rgb(88, 134, 76) !important;
}
Now everything works as intended but <div id="comments"> is not excluded.
Please help,
Dan
Try to overwrite your style for #comments using !important for a certain property.
You can use the class name:
<div id="main">
<div id="maincontent" class="selected"> selected </div>
<div id="singlepost" class="selected">
<div id="post" class="selected-items"> selected </div>
<div id="comments" class="notSeleted-item"> excluded </div>
</div>
<div id="sidebar" class="notSelected"> excluded </div>
</div>
you would use the class, like this:
.selected {/*your style*/}
.selected-item a{/*your style*/}
Can't you just do
#maincontent, #post {
color: rgb(88, 134, 76);
}
example
Since you're using ids.
Another way would be to create a class for them. example
Related
I'm trying to match element that dose not match given selector using css.
Given the markup below, I'm trying to select only the first ".color"
<div uid="unique-id-1">
<div> <div class="color"></div> </div>
<div uid="unique-id-2">
<div class="color"></div>
</div>
</div>
I tried [uid="unique-id-1"] .color:not([uid="unique-id-1"] [uid] .color) which did not work obviously, but I think it will help to understand what I am looking for.
Thanks in advance!
If you're only going to apply the selector to this limited combination of elements (i.e. there aren't any other .colors in the page that could potentially be affected by this), then
[uid="unique-id-1"] > div:not([uid]) > .color
Do consider renaming the attribute to data-uid if your application allows, so as to make it clearer that this is an app-specific and non-standard uid attribute.
That seems simple:
[uid="unique-id-1"]>:first-child .color {
color: red;
}
<div uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
That being said, uid as an attribute name makes your HTML invalid, so you should rename that to data-uid:
[data-uid="unique-id-1"]>:first-child .color {
color: red;
}
<div data-uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div data-uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
I have special styles for user generated content, which comes from RTE. And I got some custom components inserted in the user generated content via tags in RTE. Those components should have totally different styles and should not inherit user content styles.
I am trying to achieve this with :not css selector like shown in the snippet below. This works for 1st child of a class, inserted in :not, but not for its children. The third 'Hello' should not receive the red color styling (as I think), but it does. Am I doing something wrong? Is it expected behavior? How can I achieve what I am after?
.user-content :not(.component) p {
color: red;
font-size: 50px;
}
<!-- Styled user-content inside some wrapper -->
<div class="user-content">
<div class="wrapper">
<p>Hello!</p>
</div>
</div>
<!-- A component inside user-content should be unstyled -->
<div class="user-content">
<dov class="component">
<p>Hello!</p>
</dov>
</div>
<!-- But nested elements of a component still recieve styling -->
<div class="user-content">
<div class="component">
<div class="wrapper">
<p>Hello!</p>
</div>
</div>
</div>
Your :not condition is met as true for your class="wrapper" elements, because they are not with component class. Using :not will apply to each element seperatly, without parent-child relationship:
<div class="user-content">
<div class="component"> :not(.component) is false
<div class="wrapper"> :not(.component) is true, so rule applies.
<p>Hello!</p>
</div>
</div>
</div>
To create parent-child relationship, use > in your rule:
.user-content > :not(.component) p
Your selector is getting a correct result, you need to use > instead of space to get your expected result .user-content > :not(.component) p
.user-content > :not(.component) p {
color: red;
font-size: 50px;
}
<!-- Styled user-content inside some wrapper -->
<div class="user-content">
<div class="wrapper">
<p>Hello!</p>
</div>
</div>
<!-- A component inside user-content should be unstyled -->
<div class="user-content">
<dov class="component">
<p>Hello!</p>
</dov>
</div>
<!-- But nested elements of a component still recieve styling -->
<div class="user-content">
<div class="component">
<div class="wrapper">
<p>Hello!</p>
</div>
</div>
</div>
I have the following HTML:
<div class="tocolor">tocolor 1
<div id="one">tocolor 11</div>
</div>
<div class="mplampla"><span id="two">
</span>tocolor 2</div>
<div class="tocolor-2"><span id="three">
</span>tocolor 3</div>
<div class="tocolor tocolor-1">tocolor 4
<span id="one">tocolor 44</span>
</div>
and I want to style (let's say color green) "tocolor 11" using a combination of atrribute selectors.
I tried the following CSS but it doesn't do anything
div[class*='tocolor'][div[id*='one']] {
color:green
}
Thanks
Used to this
div[class*='tocolor'] div[id*='one'] {
color:green
}
and this
div[class*='tocolor'] > div[id*='one'] {
color:green
}
Demo
I have this code on a login page:
<div id="header">
<div id="homeBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
I'd like to select div#navigation but only when it follows div#header that contains div#homeBanner. The reason is I have similar code on a different page:
<div id="header">
<div id="siteBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
I don't want to affect the style of div#navigation when it follows div#header that contains div#siteBanner. Does this make sense?
How do I select div#navigation only when it follows div#header that contains div#homeBanner? I thought it was:
div#header div#homeBanner > div#navigation
... but that doesn't seem to work.
Problem here is that you're trying to select the sibling of a parent element based on the parent's child, which isn't possible in CSS.
Your best bet is to add a class to #header (or even body) based on that information then make use of that class.
For example:
<div id="header" class="home">
<div id="homeBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
With this selector (as mentioned by others, use + for siblings, not > for children):
#header.home + #navigation
Please try the following code:
div#header + div#navigation
Use the + for sibblings.
For the following example:
http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html
I would like to make the tabs right aligned and still retain the current order.
I'm certain its something simple - just too close to it to see the solution.
Off the top my head, how about:
<div id="demo" class="yui-navset">
<ul class="yui-nav" style="text-align:right;">
<li><em>Tab One Label</em></li>
<li class="selected"><em>Tab Two Label</li>
<li><em>Tab Three Label</em></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
Have you tried applying "text-align: right;" to the container div :
<div id="demo" class="yui-navset">
?
What da5id and Kevin Le said.
In the CSS file, add this line:
ul.yui-nav { text-align:right; }
It's the same solution.
HTML Code:
<div id="demo" class="yui-navset">
<div class ="tabs-nav" >
<ul class="yui-nav" >
<li><em>Tab One Label</em></li>
<li class="selected"><em>Tab Two Label</li>
<li><em>Tab Three Label</em></li>
</ul>
</div>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
CSS:
div.tabs-nav {height: 45px;} /* important to set div's height so your tabs navigation does not fall in to the tabs content */
ul.yui-nav { float: right;}
ul.yui-nav li { float: left;}