media queries to hide the 1st element doesn't work - html

I have several <hr /> and I use the below css in media queries
hr:first-child {
no luck, why? My scope of media queries is ok, other class work fine but not this one, I wonder.. ??

try this:
hr:first-of-type
{
display:none;
}
As the name of the selector suggests, :first-child refers to the first child of the element, and :first-of-type refers to the first element of that type. I believe you are looking for the latter.

To select the first HR You need to use
hr:first-of-type {display: none; }
Using the :first-child pseudo selector selects every hr element that is the first child of it's parent.
Using the :first-of-type pseudo selector selects the first hr element of it's parent

Also you can try like the following:
<hr class="hideinsmallscreen" />
Change the class name as you want .hideinsmallscreen
Within media query you can use the class to hide that <hr/>
.hideinsmallscreen{
display:none;
}

Related

:last-of-type selector not working inside media query

JSFiddle Link: http://jsfiddle.net/sNeR7
The border under the text "Of this I am absolutely certain; that to claim absolute certainty is a fool's enterprise." shouldn't be there, since I have added this style rule:
.bannerItem:last-of-type
{
border-bottom: none!important
}
inside #media(max-width: 40em)
{ ... }.
Any idea why this happens?
When using :last-of-type realize that it only searches for the last element of a certain type (p, div, etc) within a parent, not a class or ID value. Since all of the children within .bannerHolder are of the same type, using :last-of-type properly would've ended up selecting .bannerPager instead, since its the last child div of its parent.
If you want to style the last .bannerItem within .bannerHolderyou can use:
.bannerHolder div.bannerItem:nth-child(3) {border-bottom: none;}
http://jsfiddle.net/sNeR7/3/
You can also use the adjacent sibling combinator to support older versions of IE:
.bannerHolder .bannerItem + .bannerItem + .bannerItem {border-bottom: none;}
http://jsfiddle.net/sNeR7/2/
Note that :nth-child() also doesn't search for an elements class, it only cares about whether or not an element is a child of its parent. So adding the class above isn't actually necessary.
:last-of-type selects the last element of that specific type, not the last element with a certain class. So in fact your selector .bannerItem:last-of-type will select nothing.
div.bannerItem:last-of-type would select the last div element, not the last element with class .bannerItem.
Since your markup contains div after .bannerItem, your selector will not work as you expect it to.
Assuming that there could be any number of .bannerItems I don't think there is actually a way to do what you are trying to do with pure css selectors.
If there will always be three you could use:
.bannerItem:nth-child(3) {
border-bottom: none!important
}
Fiddle

CSS Selector for Class without Specific ID

I have a series of elements with the class .tab-pane attached to it. They also each have their own unique ID. I am trying to select every .tab-pane that does not have the id #home. I have tried .tab-pane:not#home{...} but it did not work. Any suggestions?
Sample HTML
<div id="home" class="tab-pane">...</div>
<div id="myself" class="tab-pane">...</div>
<div id="contact" class="tab-pane">...</div>
<div id="resume" class="tab-pane">...</div>
Try instead:
.tab-pane:not(#home) {
color: red;
}​
JS Fiddle demo.
The thing that you're not-selecting appears within the parentheses of the :not() selector, rather than appearing as a 'chained' pseudo-selector.
In this specific case, since the element you want to have not-styled is the first element, you could also use the general-sibling combinator ~ to style subsequent siblings differently:
#home ~ .tab-pane {
color: red;
}​
JS Fiddle demo.
But this would, and could, only work if the differently-styled (or un-styled) element is the first, since CSS can only select elements that appear later in the DOM, either as subsequent siblings, or descendants, of earlier elements.
References:
Selectors Level 3, negation :not() pseudo-class.
Maybe you meant to do this:
.tab-pane:not(#home)
You can access each of the individual classes by either using .tab-pane:eq(noOfClass) selector
Check examples here
OR You can also use :not selector .tab-pane:not(#home)
You can also try this (this is just like regular expressions)
.tab-pane:not([id^='home'])
{/*your code*/}
If you want to not include the id's which start with letter "h" then try the below one:
.tab-pane:not([id^='h'])
{/*your code*/}

Is it possible to call an inner div within an outer div on a stylesheet in one line?

i'm using wordpress and i have an element i want to style... it's called...
<h2 class="widgettitle">
now, i know i can do,
h2.wigettitle {
whatever:css;
}
however, the problem i have is that i have multiple widgets with the same title and it effects all of them.
but, this h2.widget title is within another div called "headerarea".
so, in my file it's like...
<div id=headerarea">
<h2 class="widgettitle">
whatever title
</h2>
</div>
so is it possible to make this specific element do something like, #headerarea.h2.widgettitle or something in my element?
i tried styling the outer div independently, but the inner div is still grabbing styling from somewhere else, so i need to override all of them.
hope this makes sense... thanks for any help guys.
Use #headerarea h2.widgettitle. Including a space means to look in the children. If you include a > this means only look in direct children. Note that if your overrides do not work, add !important at the end to ensure they will override any other styles applied.
You can use the child or descendant selectors to accomplish this. Child selector > #headerarea > h2.widgettitle select h2 elements with class widgettitle that is a child of element with id headerarea. Descendant selector a space #headerarea h2.widgettitle select h2 elements with class widgettitle that is a descendant of element with id headerarea.
Also see http://www.w3.org/TR/css3-selectors/#selectors
#headerarea .widgettitle {
/* Put your styles here */
}

Multiple names in CSS, including elements in declaration: syntax questions

I came across these on the new job I just started. I don't have web experience so my knowledge is pretty basic. I'm not sure what the below do. I've never come across or used syntax like this before. I was able to find that the #TAFeedback will apply to any element with that id, but that's all I could dig up.
.howmanyinstate .ctrlHolder ol
{
width:90%;
float:right;
}
#TAFeedBack div.ctrlHolder table
{
background:none !important;
}
.howmanyinstate .ctrlHolder ol
applies the style to all ordered lists ol in an element that has a class ctrlHolder and that element is a child of an element with class howmanyinstate
For example:
<div class="howmanyinstate">
<div class="ctrlHolder">
<ol>
...
</ol>
</div>
</div>
A CSS rule identifies the element to which it applies by using a selector.
Here is a writeup on CSS Selectors
The following is a descendant selector: #TAFeedBack div.ctrlHolder table indicates that it applies to a table that is contained in a div that has the attribute class="ctrlHolder" which is contained inside an element that has id="TAFeedBack".
.howmanyinstate .ctrlHolder ol
applies to any ol element within any element with a class of ctrlHolder which is in itself inside any element with a class of howmanyinstate
I'm not sure if you already know this, but this is known as a "css selector". Perhaps something you might want to read up on.

How to select an html element that has two class names?

IE7 doesn't support :last-child pseudo selector. I am thinking of explicitly adding a class name to denote it as the last element but not sure how to select this element inside a css file. Anyone have any ideas on how to do this ?
.class1.class2 {color:red}
and
<div class="class1 class2"></div>
or install IE7-js and :last-child will "just work".
If you have
<div class="element"/>
<div class="element last"/>
You can just do
div.element
{
// styles effect both divs
}
div.last
{
// style will only effect the second element and overides because lower in the css
}
One extra thing to note about multiple classnames is that IE6 can not handle them properly. It will only consider the last classname in the list:
.class1.class2 {color:red} => .class2 in IE6