Community Forums › Forums › Archived Forums › Design Tips and Tricks › trouble with pseudo-classes
Tagged: pseudo-classes
- This topic has 4 replies, 3 voices, and was last updated 9 years, 4 months ago by anotherusername.
-
AuthorPosts
-
December 4, 2014 at 9:09 pm #133660LOMember
Hello,
I am trying to target the headings of featured posts on the homepage.
I would like each one to be unique; first heading a little bigger in font-size and the next one smaller etc.
I have been trying to use pseudo-classes but nothing is working.
I am building locally so I can't share link.
I successfully set the general style for All h2 headings with the class of .entry-title :::
.home-widgets #featured-post-2 .entry-title {
font-family: 'Oswald', sans-serif;
font-weight: 300;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 22px;
margin: 0 0 30px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}But I can't seem to target each heading individually.
Here is the CSS that I tried and is Not working :::
.home-widgets #featured-post-2 .entry-title:nth-of-type(2) {
font-size: 32px; !important;
}.home-widgets #featured-post-2 h2:nth-of-type(3) {
font-size: 32px; !important;
}#featured-post-2 .entry-title:nth-child(3) {
font-size: 32px; !important;
}#featured-post-2 .entry-title:nth-of-type(2) {
font-size: 32px; !important;
}I'm using the Centric Child Theme.
You can see the Featured Posts on the demo :::
http://my.studiopress.com/themes/centric/#demo-full
Any advise will be appreciated.
Thank you!
http://localDecember 5, 2014 at 11:19 am #133708David ChuParticipantHi!
A very fun and tricky brainteaser! The trick with these is parentage. It's much easier getting these things if you have, say, 5 paragraphs in a parent DIV, and no other HTML. This has a whole lot more HTML! So once I moved the "nth" bit far enough in the chain to be "next to" the parent, that did it. Just for giggles I did a full path so that no "important" is needed, although you could write slightly shorter statements if you use that. Here's an example, and just do a couple more lines with (2) and (3), you get the idea.body .featured-content article:nth-of-type(1) header h2.entry-title a {color: blue;}
As you know, you could also just use the classes on each ARTICLE, but doing it your way means that it's automated. As you also probably know, very old browsers don't do those selectors, but then again you page will still work, you'll just have less styling.
Cheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
December 5, 2014 at 2:22 pm #133726LOMemberThank you!
This brainteaser almost killed me;)
December 5, 2014 at 2:26 pm #133727David ChuParticipantYou're welcome!
I am a very determined puzzle solver, and even for a geek like me, that was not at all obvious, so I understand!
Those selectors can be really cool if you have crazy grids and stuff like that. They really allow you to go wild with styling.
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
December 5, 2014 at 6:16 pm #133757anotherusernameParticipantYou are one sick puppy, David (and I mean that in a GOOD way).
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.