0

The code is already written, without each class having a parent. :( -So now the whole page is a bunch of sections. classes may have any number of sections with any number of articles inside each section. they determined that each class was a category, which is why some classes have many sections. I need a left and top border only, for each class/category. so that all sections in each category are grouped together with different colors. So other than me writing more html and giving each category its own div parent, I am trying to use CSS selectors to grab the first section of every class.

jsfiddle with code started, but have a lot more to code yet.

<section class="a">
  <article>class a article one section one</article>
  <article>class a article two section one</article>
</section>
<section class="a">
  <article>class a article one of section 2</article>
</section>
<section class="b">...

I want a border-top above each section that starts a new class. so class "a" first section only will have a red top border, class b first section will have a blue border, and so on. I added a class called top and inserted it in the sections I needed, but was there a better way than this?

css starts here
.a{border-left:solid red;}
.a.top{border-top:solid red;}
.b{border-left:solid green;}
.b.top{border-top:solid green;}
.c ...
....all the way to class z+

I tried using css4 - but browsers not using it yet.

:nth-match(1 of section.a{border-top:solid red;}

I have a lot of sections not started yet, which is why I am hoping there is a faster way. Jquery is not ruled out, haven't thought about that yet.

sclem72
  • 466
  • 6
  • 16
Jim Schwetz
  • 105
  • 2
  • 12
  • Possible duplicate of [css3 nth of type restricted to class](http://stackoverflow.com/questions/10921809/css3-nth-of-type-restricted-to-class) – Shaggy Apr 26 '16 at 15:00

3 Answers3

2

#Example: LIST

colors= ['Red', ['Red', 'Blue', 'Green', 'Black', 'White']

#Getting the first element first col colors [0]

#Getting the second element

second_col= colors [1]

#Getting the last element newest_col= colors [-1]

Changing an element. colors [0] = 'Yellow'

colors [-2] = 'Red'

colors= ['Violet', 'Purple', 'Blue']

Adding an element to the end of the list. colors.append('Orange')

Starting with an empty list colors.append('Blue')

colors= []

colors.append('Red')

colors.append('Green')

Inserting elements at a particular position colors.insert (0, 'Violet') colors.insert (2, 'Purple')

Deleting an element by its position del colors [-1]

#Removing an item by its value

colors.remove('Red')

colors -

for i

1

in

print (1)

Red

Blue Green Black White

[ 'Red'.

colors:

'Blue'.

'Green',

'Black',

'White']

Nachmill Yusohbluka
  • 21
  • 2
0

If you use unique class like "class='a'" for the all section you can simply use

.a{border-left:solid blue;border-top:solid blue;}

If not you can try using jQuery, get all sections and put css

var sections = $('section');
$.each(sections, function(index, section){
    $(section).css('color', 'red');
});

Edit: if you want different color you can have some array with colors and change them by some calculation before you put the color attribute(in example 'red')

Oposyma
  • 129
  • 5
  • Thank you for the fast response, I have one or more sections with each class, so the first option would put a top border on too many of the sections, vs just the first section of each class. Not understanding the jQuery, but I think that would do the same? But thanks. – Jim Schwetz Apr 26 '16 at 14:46
0

No it's not possible because all CSS selectors selects element of type.

and unfortunately there is no selector like first-of-class or something like that. link for all css selectors : http://www.w3schools.com/cssref/css_selectors.asp

You can use [attribute=value] but it's only purpose is to check weather first section has that attribute with provided value or not.

You have to use javascript or whatever other language you are working with to select the way you want(by first class of type)

Nirpendra Patel
  • 659
  • 7
  • 20