select the first child tag inside another tag xml

See more:

XML

CSS

want to select the first <school> tag and its childs <department> tags only not other <school> tags i have tried the following code but the othere <school> tags still appear (means that they are selected ) how to select the first <school> tag and its childs <department> tags only

any one please edit this question i can not format it

here is xml file

<university>
 <officers>
 </officers>
  <!-- have subelements -->
 <provosts>
   <!-- have subelements -->
 </provosts>
 <schools>
    <!-- have subelements -->
 </schools>
 <school>
   <the_school>School of Humanities and Social Sciences.</the_school>
   <department>
     <depthead>Head: W.C.Reed</depthead>
     <deptname>Department Name: African Studies</deptname>
     <major>Major: Not Allowed</major>
     <maj_courses>Major Courses: (0)</maj_courses>
     <minor>Minor: Allowed</minor>
     <min_courses>Minor Courses: (15)</min_courses>
   </department>
   <department>
     <depthead>Head: W.C.Reed</depthead>
     <deptname>Department Name: African Studies</deptname>
     <major>Major: Not Allowed</major>
     <maj_courses>Major Courses: (0)</maj_courses>
     <minor>Minor: Allowed</minor>
     <min_courses>Minor Courses: (15)</min_courses>
   </department>
   <department>
     <depthead>Head: W.C.Reed</depthead>
     <deptname>Department Name: African Studies</deptname>
     <major>Major: Not Allowed</major>
     <maj_courses>Major Courses: (0)</maj_courses>
     <minor>Minor: Allowed</minor>
     <min_courses>Minor Courses: (15)</min_courses>
   </department>	
 </school>
 <school>
   <the_school>School of Humanities and Social Sciences.</the_school>
   <department>
     <depthead>Head: W.C.Reed</depthead>
     <deptname>Department Name: African Studies</deptname>
     <major>Major: Not Allowed</major>
     <maj_courses>Major Courses: (0)</maj_courses>
     <minor>Minor: Allowed</minor>
     <min_courses>Minor Courses: (15)</min_courses>
   </department>
   <department>
     <depthead>Head: W.C.Reed</depthead>
     <deptname>Department Name: African Studies</deptname>
     <major>Major: Not Allowed</major>
     <maj_courses>Major Courses: (0)</maj_courses>
     <minor>Minor: Allowed</minor>
     <min_courses>Minor Courses: (15)</min_courses>
   </department>
   <department>
     <depthead>Head: W.C.Reed</depthead>
     <deptname>Department Name: African Studies</deptname>
     <major>Major: Not Allowed</major>
     <maj_courses>Major Courses: (0)</maj_courses>
     <minor>Minor: Allowed</minor>
     <min_courses>Minor Courses: (15)</min_courses>
   </department>	
 </school>
</university>

here is my code

UNIVERSITY SCHOOL:first-of-type > THE_SCHOOL{
     display: block;
     color: red;
     font-size: 20px;
     text-align: center;
   }
  UNIVERSITY SCHOOL:first-of-type > DEPARTMENT
    {
        border: 1px solid black;
      display: block;
      width: 95%;
      margin-top: 29px;
      margin-left: 20px;
      border-bottom-color: rgb(249, 245, 245);
    }
   UNIVERSITY SCHOOL:first-of-type DEPTHEAD
   {
     display: block;
   }
   UNIVERSITY SCHOOL:first-of-type DEPTNAME
    {
      display: block;
    }
       UNIVERSITY SCHOOL:first-of-type MAJOR
    {
      display: block;
    }
       UNIVERSITY SCHOOL:first-of-type MAJ_COURSES
    {
      display: block;
    }
      UNIVERSITY SCHOOL:first-of-type MINOR
    {
      display: block;
    }
       UNIVERSITY SCHOOL:first-of-type MIN_COURSES
    {
      display: block;
    }