I have a specific h1 header I'd like to target with css but not sure how.
Html
</div>
</header><!-- #masthead -->
<div id="content" class="main-container">
<div class="header-callout"></div>
<section class="content-area pt0 ">
<div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar.
right">
<article id="post-9949" class="post-9949 page type-page
status-publish hentry"><header class="entry-header">
<h1 class="entry-title">Showcase of the Month</h1>
</header><!-- .entry-header -->
View here
Basically I'd like to centre it. But margin: auto never works.
You can use:
.entry-title {
/* Your CSS */
}
or
h1.entry-title {
/* Your CSS */
}
If this is not working, are there other CSS rules that may apply here (like a separate h1 tag style?) You can make it more specific like this:
header > h1.entry-title {
/* Your CSS */
}
Here, the > means h1 tags that are immediate children of a header tag and have class entry-title.
If you only want to target this specific h1 tag, give it an ID:
<h1 class="entry-title" id="my-title">Text</h1>
IDs can be targeted using #:
#my-title {
/* Your CSS */
}
or
h1#my-title {
/* Your CSS */
}
You can even ensure you select only those that have a certain class and a certain ID with this:
h1#my-title.entry-title {
/* Your CSS */
}
Related
How can I write a CSS Rule that selects all div.box that are not inside .container?
The following snippet is not working because there is a div without .container inside the div.container.
div:not(.container) .box {
background:red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.
.box:not(.exclude) {
background: red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:
/* Generic Box styles */
.box
{
border: 1px solid black;
}
/* Boxes in a container */
.container .box
{
color: blue;
}
<div class="box">Generic Box</div>
<div class="container">
<div class="box">I'm in a container</div>
</div>
Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:
div.box:not(.container) {
background:red;
}
and
<div class="box">box</div>
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div>
If you want all the divs, just remove the .box
I'm using a CSS layout on both html page.
I want to use the same style except I want to hide/disable other classes made for it for the second html page and still use the others on the first html page.
Situation:
class="firstClass" has the fonts and style I wanted with it but has other classes and styles that shows when I use that class.
I tried getting the other classes by adding a secondClass on the same level of the first class, then did this:
.firstClass .secondClass, .dontWant1 .dontWant2 {
display:none;
}
Problem is it also hides on the first html.
You can have multiple classes on one element. That said, you add classes on one page that you dont add on the other page, to show elements on page 1 and hide them on page 2.
You can have that one class show or dontshow to define what elements are visible.
Then you add a class to define your styles.
HTML/CSS:
.greenbox {
background-color: green;
width: 100px;
height: 100px;
}
.redbox {
background-color: red;
width: 20px;
height: 20px;
}
.show {
display: block;
}
.dontshow {
display: none;
}
<div class="greenbox">
<div class="show">
<div class="redbox">
<!-- red box visible -->
</div>
</div>
<div class="dontshow">
<div class="redbox">
<!-- red box not visible -->
</div>
</div>
<div class="dontshow redbox">
<!-- red box not visible -->
<!-- exactly the same outcome as the above without the wrapping div -->
</div>
</div>
You can try this:
html:
<div class="main">
content goes here.
</div>
<div class="main active">
content goes here.
</div>
css:
.main {
background-color:yellow;
display:none;
}
.active {
display:block; OR display:block !important;
}
HTML code:
<html class="mobile portrait">
<body>
<div>
<header>
<img class="company_logo">
</header>
<section>
<div>
<img class="company_logo">
</div>
</section>
<footer>
<img class="company_logo">
</footer>
</div>
</body>
</html>
In order to display: none;, How can I apply one rule to .company_logo while .mobile .portrait?:
Update: Edited HTML code to add multiple company_logo. Code deleted from the question:
/* CSS code */
.mobile .portrait > body > div > header > .company_logo {
display: none;
}
/* Matches elements with the class of company_logo
that are inside an element
with both "mobile" and "portrait" classes */
.mobile.portrait .company_logo {
/* style here */
}
I have a bunch of divs like this
<div id="parentDiv">
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
</div>
is there some way using only CSS that I could show the current index to the left of the childDiv elements and it automatically update if I were to shuffle them around using jQuery or would I have to to manipulate the child div using jquery ?
Or
One of the other ways I was thinking to handle it would be to change them to ol li but then I need them to be zero based and I haven't see any thing in css to do that either
You can use CSS counters:
#parentDiv {
counter-reset: index; /* Create a `index` counter scope */
}
.childDiv:before {
content: counter(index) ". "; /* Display `index` counter */
counter-increment: index; /* Add 1 to `index` */
}
<div id="parentDiv">
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
</div>
So, I've encountered a situation where inserting an element of a different class/id breaks all css-rules on that :first-child.
<div id="nav">
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
</div>
.nSub:first-child { margin-top:15px; -moz-border-radius-topleft:5px; /* ... */ }
.nSub { background:#666; /* ... */ }
.nSub:last-child { -moz-border-radius-bottomleft:5px; /* ... */ }
As soon as I insert an element of another class/id above, like this:
$('nav').insert({top:'<div id="newWF"></div>'});
all declarations for .nSub:first-child are being ignored in both FF 3.6 and Safari 4.
EDIT:
sorry if I did not say it clearly: the element inserted above is supposed to NOT have the classname ".nSub"
<div id="nav">
<div id="newWF"></div>
<div class="nSub">abcdef</div> <!-- BROKEN CSS -->
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
</div>
That's because the first element with class nSub is no longer the first-child of the parent, and thus the style no longer matches.
If the dynamically inserted element would also have class nSub, then the rule would still match, and match for the newly inserted element (which is now the first child).
I'm no CSS3 expert, but you could try the :nth-of-type selector:
.nSub:nth-of-type(1) {
/* Rules for the first .nSub here */
}
This is because, you don't set the class for this inserted element, I guess...
In you CSS-File you say ".nSub:first-child", but the element you are inserting is not of that class: "
Maybe it helps, if you add the class-attribute to that element, too:
$('nav').insert({top:'<div id="newWF" class="nSub"></div>'});
What PatrikAkerstrand said about the rule no longer matching is correct. The :first-child pseudo (unfortunately) only targets the first child of its parent that also has the element/class/whatever you specified.
I just spent half an hour cursing at why the following wouldn't work
<div id="header">
<img src="path/file.png" />
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
#header .img {
margin:0 25px;
}
#header .img:first-child,
#header .img:last-child {
margin:0;
}
I found that the solution were to wrap the div.img's into a div.images, like this
<div id="header">
<img src="path/file.png" />
<div class="images">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
#header .images .img {
margin:0 25px;
}
#header .images .img:first-child,
#header .images .img:last-child {
margin:0;
}
Edit: If you don't want to add non-semantic workaround markup, you can use the :first-of-type pseudo-class. This, however, is not supported in earlier versions of IE.